堆栈内存溢出
  繁体   English   中英

尝试在 React 中使用“Socket.io-client”模块会引发错误：无法分配给对象“#”的只读属性“exports”<Object> &#39;

[英]Trying to use "Socket.io-client" module in React throws error: Cannot assign to read only property 'exports' of object '#<Object>'

 原文  2021-10-16 15:26:02  1   1    javascript/ node.js/ reactjs/ webpack/ socket.io

问题描述

我在我的 React js Web 应用程序中使用socket.io-client 。 它编译时没有错误，但是当我尝试打开开发服务器 (localhost:3000) 时，出现以下错误：

错误截图

在抛出错误的这个项目中，这里是相关包及其版本的列表：

  • @testing-library/jest-dom@5.14.1
  • @testing-library/react@11.2.7
  • @testing-library/user-event@12.8.3
  • react-dom@17.0.2
  • 反应脚本@4.0.3
  • 反应@17.0.2
  • socket.io-client@4.3.1

网络包版本：4.44.2

像这样的线程表明这是在 ES6 中混合 import 和 module.exports 的某种问题，但我绝对不想修改 socket.io-client 模块。

在之前的 React 项目中，该模块在其中工作，这里是相关包及其版本的列表：

  • @testing-library/jest-dom@4.2.4
  • @testing-library/react@9.5.0
  • @testing-library/user-event@7.2.1
  • 反应脚本@3.4.4
  • 反应@16.14.0
  • socket.io-client@4.1.2

网络包版本：4.42.0

我玩过一些不同版本的 socket.io-client 并做出反应以使其正常工作，但无济于事......

1 个解决方案

解决方案1
 0  2021-10-16 18:18:24

Webpack 使用 ES 语法，因此 commonJS 语法将不起作用。

export default lookup

如何修复“无法分配给 object 的只读属性“导出”'#<object> ' 将第二个 function 添加到 module.exports 时？<div id="text_translate"><p> 不幸的是，我已经被困了大约 5 天了。 我用谷歌搜索过，没有什么对我有用。 我有一个 utils.js 文件，里面有很多东西可以帮助我。 当我将 function "doesUserContainRoles" 添加到导出时，我的 Chrome 控制台给了我错误：</p><blockquote><p> Uncaught TypeError: Cannot assign to read only property 'exports' of object '#&lt;Object&gt;'</p></blockquote><p> 当我删除 function 时，utils 文件中的所有内容都可以完美运行，根本没有 0 个问题。 只要我添加 function，我就会收到此错误。 我通过以下方式要求 utils 文件：</p><pre class="lang-js prettyprint-override"> const utils = require("../../../utils");</pre><p> 并且没有与此一起使用的import 。 （我知道module.exports和import不能一起工作）</p><p> 我正在使用什么：</p><ul><li><p> Vue.js @vue/cli 4.5.8</p></li><li><p> Node.js v15.2.0</p></li></ul><h3> 文件：</h3><p> utils.js</p><pre class="lang-js prettyprint-override"> const winston = require("winston"); const { datadog } = require("./credentials.js"); const { createLogger, format, transports } = require('winston'); const base_url = "http://localhost:3001/api/v1" // Winston ~ const httpTransportOptions = { host: datadog.logger.host, path: datadog.logger.path, ssl: datadog.logger.ssl }; const customLevels = { levels: { emergency: 0, alert: 1, critical: 2, error: 3, warn: 4, notice: 5, info: 6, debug: 7, success: 8 }, } const logger = createLogger({ level: 'info', levels: customLevels.levels, exitOnError: false, format: format.json(), transports: [ new transports.Http(httpTransportOptions), ], }); const commonMessages = { accessPage: "User Accessed a Page", restrictedPage: "Attempt at accessing restricted page" } function alertGeneral() { alert("Oops. An error has occurred. Please try again later, If this problem continues. please contact Vinniehat;"), } function doesUserContainRoles(userRoles. containsRoles) { return.;userRoles.some(role =&gt; containsRoles,includes(role)), } module,exports = { logger, commonMessages, base_url, alertGeneral, doesUserContainRoles }</pre><p> 这是错误堆栈：</p><pre> Uncaught TypeError: Cannot assign to read only property 'exports' of object '#&lt;Object&gt;' at Module.eval (utils.js?1b23:45) at eval (utils.js:68) at Module../utils.js (app.js:1944) at __webpack_require__ (app.js:854) at fn (app.js:151) at eval (router.js?9883:19) at Module../src/router/router.js (app.js:1812) at __webpack_require__ (app.js:854) at fn (app.js:151) at eval (main.js:34)</pre><p> 我也尝试使用export default 。 这样做时，我的前端工作。 网站加载没有错误。 不过，我的后端使用 Express.js 运行，然后引发错误：</p><pre> Unhandled rejection E:\Development\Websites\iceberg-gaming-website\utils.js:45 export default { ^^^^^^ SyntaxError: Unexpected token 'export' at wrapSafe (node:internal/modules/cjs/loader:1018:16) at Module._compile (node:internal/modules/cjs/loader:1066:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10) at Module.load (node:internal/modules/cjs/loader:967:32) at Function.Module._load (node:internal/modules/cjs/loader:807:14) at Module.require (node:internal/modules/cjs/loader:991:19) at require (node:internal/modules/cjs/helpers:92:18) at Object.&lt;anonymous&gt; (E:\Development\Websites\iceberg-gaming-website\express\modules\user.js:9:15) at Module._compile (node:internal/modules/cjs/loader:1102:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10) at Module.load (node:internal/modules/cjs/loader:967:32) at Function.Module._load (node:internal/modules/cjs/loader:807:14) at Module.require (node:internal/modules/cjs/loader:991:19) at require (node:internal/modules/cjs/helpers:92:18) at E:\Development\Websites\iceberg-gaming-website\express\express.js:27:27 at tryCatcher (E:\Development\Websites\iceberg-gaming-website\node_modules\bluebird\js\release\util.js:16:23)</pre></div></object>

[英]How do I fix 'Cannot assign to read only property 'exports' of object '#<Object>' when adding a 2nd function to module.exports?

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 未捕获的TypeError：无法分配给对象'＃<Object>'的只读属性'exports' TypeError：无法分配为只读对象“＃”的属性“ exports” <Object> 在ReactJS中 无法分配给对象“#”的只读属性“exports”<Object> &#39; 如何修复“无法分配给 object 的只读属性“导出”'#<object> ' 将第二个 function 添加到 module.exports 时？<div id="text_translate"><p> 不幸的是，我已经被困了大约 5 天了。 我用谷歌搜索过，没有什么对我有用。 我有一个 utils.js 文件，里面有很多东西可以帮助我。 当我将 function "doesUserContainRoles" 添加到导出时，我的 Chrome 控制台给了我错误：</p><blockquote><p> Uncaught TypeError: Cannot assign to read only property 'exports' of object '#&lt;Object&gt;'</p></blockquote><p> 当我删除 function 时，utils 文件中的所有内容都可以完美运行，根本没有 0 个问题。 只要我添加 function，我就会收到此错误。 我通过以下方式要求 utils 文件：</p><pre class="lang-js prettyprint-override"> const utils = require("../../../utils");</pre><p> 并且没有与此一起使用的import 。 （我知道module.exports和import不能一起工作）</p><p> 我正在使用什么：</p><ul><li><p> Vue.js @vue/cli 4.5.8</p></li><li><p> Node.js v15.2.0</p></li></ul><h3> 文件：</h3><p> utils.js</p><pre class="lang-js prettyprint-override"> const winston = require("winston"); const { datadog } = require("./credentials.js"); const { createLogger, format, transports } = require('winston'); const base_url = "http://localhost:3001/api/v1" // Winston ~ const httpTransportOptions = { host: datadog.logger.host, path: datadog.logger.path, ssl: datadog.logger.ssl }; const customLevels = { levels: { emergency: 0, alert: 1, critical: 2, error: 3, warn: 4, notice: 5, info: 6, debug: 7, success: 8 }, } const logger = createLogger({ level: 'info', levels: customLevels.levels, exitOnError: false, format: format.json(), transports: [ new transports.Http(httpTransportOptions), ], }); const commonMessages = { accessPage: "User Accessed a Page", restrictedPage: "Attempt at accessing restricted page" } function alertGeneral() { alert("Oops. An error has occurred. Please try again later, If this problem continues. please contact Vinniehat;"), } function doesUserContainRoles(userRoles. containsRoles) { return.;userRoles.some(role =&gt; containsRoles,includes(role)), } module,exports = { logger, commonMessages, base_url, alertGeneral, doesUserContainRoles }</pre><p> 这是错误堆栈：</p><pre> Uncaught TypeError: Cannot assign to read only property 'exports' of object '#&lt;Object&gt;' at Module.eval (utils.js?1b23:45) at eval (utils.js:68) at Module../utils.js (app.js:1944) at __webpack_require__ (app.js:854) at fn (app.js:151) at eval (router.js?9883:19) at Module../src/router/router.js (app.js:1812) at __webpack_require__ (app.js:854) at fn (app.js:151) at eval (main.js:34)</pre><p> 我也尝试使用export default 。 这样做时，我的前端工作。 网站加载没有错误。 不过，我的后端使用 Express.js 运行，然后引发错误：</p><pre> Unhandled rejection E:\Development\Websites\iceberg-gaming-website\utils.js:45 export default { ^^^^^^ SyntaxError: Unexpected token 'export' at wrapSafe (node:internal/modules/cjs/loader:1018:16) at Module._compile (node:internal/modules/cjs/loader:1066:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10) at Module.load (node:internal/modules/cjs/loader:967:32) at Function.Module._load (node:internal/modules/cjs/loader:807:14) at Module.require (node:internal/modules/cjs/loader:991:19) at require (node:internal/modules/cjs/helpers:92:18) at Object.&lt;anonymous&gt; (E:\Development\Websites\iceberg-gaming-website\express\modules\user.js:9:15) at Module._compile (node:internal/modules/cjs/loader:1102:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10) at Module.load (node:internal/modules/cjs/loader:967:32) at Function.Module._load (node:internal/modules/cjs/loader:807:14) at Module.require (node:internal/modules/cjs/loader:991:19) at require (node:internal/modules/cjs/helpers:92:18) at E:\Development\Websites\iceberg-gaming-website\express\express.js:27:27 at tryCatcher (E:\Development\Websites\iceberg-gaming-website\node_modules\bluebird\js\release\util.js:16:23)</pre></div></object> 如何修复无法分配给 object 的只读属性 'exports' '#<object> ',这是使用framework7-svelte cli<div id="text_translate"><p> <a href="https://i.stack.imgur.com/XCz77.png" rel="nofollow noreferrer">这个错误 module.exports</a></p><p> <a href="https://i.stack.imgur.com/ZlhAp.jpg" rel="nofollow noreferrer">这 webpack</a>通天塔</p></div></object> 未捕获的TypeError：无法分配为仅读取对象&#39;的属性&#39;exports&#39; 我该如何解决在React中无法分配为只读对象的属性“ exports”？ Vue导入导致无法分配给object错误的只读属性'exports' socket.io-client对象不是函数 错误：找不到模块&#39;socket.io-client / dist / socket.io.min.js&#39;
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM