vue 报错之Cannot assign to read only property 'exports' of object

最新推荐文章于 2024-02-24 11:05:34 发布
原创 最新推荐文章于 2024-02-24 11:05:34 发布 · 466 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解析了在Vue项目中同时使用module.exports和import导致的错误Cannot assign to read-only property 'exports' of object '#<Object>'，并提供了有效的解决方案，包括选择单一的模块导出方式和对babel.config.js进行配置。

vue 报错,
Cannot assign to read only property ‘exports’ of object ‘#<Object>’
标题老是显示有非法字符什么鬼???

原因: 使用module.exports={ …},致使出现报错

根本原因: 无法同时使用 import 与 module.exports

解决方案:

  • 使用其中一种即可, 两者不要同时混用, 这是一个不好的习惯;
  • 对babel.config.js 进行配置, 解决冲突;
    添加如图的一行:sourceType: 'unambiguous'
    在这里插入图片描述

等等,你以为就好了,

这时需要重新启动项目才会生效

参考:https://www.jianshu.com/p/acec542bcfc4

viser-vue打包编译运行报错Cannot assign to read only property ‘constructor‘ of object ‘#＜t＞‘
m0_49280365的博客
06-02 1221
viser-vue打包编译运行报错Cannot assign to read only property ‘constructor‘ of object ‘#＜t＞‘
使用 babel-loader 打包 ES6 代码出现Cannot assign to read only property ‘exports’ of object ‘#‘解决
缚己
01-22 645
问题截图 翻译： 不能赋值给对象'#<Object>'的只读属性'exports' 如果你使用了 @babel/plugin-transform-runtime 插件，同时你又在某个commonJS 规范写的文件里使用这个插件时，babel 会默认你这个文件是 ES6 的文件，然后就使用 import 导入了这个插件，但是 webpack 不可以混用这两种语法规范。 解决方法就是在 babel.config.js 配置文件中设置 unambiguous 字段。让 babel 和 webpac
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法
12-09
发现问题 运行一下以前的一个Vue+webpack的 vue仿新闻网站  小项目，报错 由于自己vue学习不深入，老是这个报错，找了好久（确切的说是整整一下午^…^）才找到原因 -v- Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'   点开错误的文件，标注错误的地方是这样的一段代码： import {normalTime} from './timeFormat'; module.exports={ 　　normalTime }; 就是module.exports
Cannot assign to read only property 'exports' of object '#<Object>' 解决方案
xuelang532777032的博客
10-08 1万+
这个 报错是在我的vue单文件里面发生的 ， 当时 我想用一个 。vue的组件 引用 另一个。vue的组件，于是我代码如下 import ab from './ab.vue';//列表顶部的新增等按钮 module.exports={ 只是测试的  别纠结我的命名 然报Cannot assign to read only property 'exports' of object
Cannot assign to read only property 'exports' of object 报错
Amos的博客
11-10 1390
Cannot assign to read only property ‘exports’ of object '#< Object>'报错 原因： 在 webpack 中不允许混用 import 和 module.exports 有时候我们vue的项目，每个页面会有这样的目录结构： 会有一个index.js文件用来导出该页面： 这里面就会有 module.exports，当我们用w...
报错TypeError: Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘ at Module.eval
m0_61995372的博客
02-24 1506
为了解决这个问题，你可以检查你的代码，确保没有直接修改 `exports` 对象的操作。这意味着你应该使用 `export` 关键字来导出模块中的变量、函数或类，而不是直接操作 `exports` 对象。然而，在 webpack 中，它会将模块转换为 ES6 模块，并使用 `export` 关键字来导出模块，而不是使用 `exports` 对象。通常，这种错误会出现在尝试修改已导出的对象时，比如在 CommonJS 模块中直接对 `exports` 进行赋值操作。
vue项目打包部署报错：Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
SM_Cute的博客
04-04 1184
vue项目打包部署报错：Cannot assign to read only property 'exports' of object '#'
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#&lt;Object&gt;‘的解决
08-30
在Vue开发过程中，有时会遇到一个常见的错误：`Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'`。这个错误通常发生在使用Webpack打包Vue应用时，由于模块导入导出规范的...
vue2 项目报错 net::ERR_FILE_NOT_FOUND app.51d977a2.js:1 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
最新发布
11-23
### 解决 `Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'` 错误 这个错误一般是由于尝试修改只读的 `exports` 对象导致的，以下是一些可能的解决办法： - **检查 ...
vue^2.6.10项目启动报错 Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
weixin_46003296的博客
03-21 840
vue项目启动报错 Cannot assign to read only property ‘exports’ of object ‘#’
Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
web_ding的博客
11-01 4310
背景：在一个旧项目中，发现重新npm install 的时候，报了Cannot assign to read only property 'exports' of object '#<Object>'，而本地运行的时候没问题，发布服务器的时候，发现问题,报了Cannot assign to read only property 'exports' of object '#<Object>'。 出现bug的原因是： 第一种是：webpack不能混合使用import 和modul..
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
blacklife00544的专栏
08-02 2827
运行Vue项目时报错如下：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'原因： The code above is ok. You can mix require and export. You can‘t mix import and module.exports.使用
Vue 解决Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
Lisa_Xiaotouzi的博客
11-15 4585
某js文件引用其他js文件 发现问题：没有引入import之前是对的，引入之后就报错了！！！但是单独使用又没有问题！！！ 错误原因：vue项目的 文件中 import 和module.exports 不能混用 解决：把module.exports 改为export default就可以了 破问题，坑死俺了！ ...
前端加载报错Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
changyana的博客
04-13 950
webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。
前端报错 Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
imxiezy的博客
08-07 1万+
1. 前端报错： Cannot assign to read only property 'exports' of object '#<Object>' 2. 报错原因： webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。 3. 解决方法 那么，js文件写法注意：一定要配对使用require和module.exports以及import和export default。 4. 其他方法 如果还不能解决问题，看
vue报错Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
热门推荐
浩星
08-18 2万+
前言： 在研究electron的时候，扒拉人家大神的源码，出现的这个问题，出现这个问题之后找了很多资料，最终也是解决了这个问题，整理下方法： 资料： 国外有一个大神对此分析的很清楚，他把原因分成以下两类： 翻译, 第一种原因就是import和module.exports的混用要知道commonJS和ES6的语法是不太一样的前者是require和module.exports后者则是import和exports,当你混用这两个语法的时候，webpack就会报错，也...
Cannot assign to read only property 'exports' of object '#<Object>'
weixin_33915554的博客
06-02 405
在webpack项目中使用@babel/plugin-transform-runtime时,报错 ERROR in Error: E:\workdata\webpackVue/node_modules/_@babel_runtime@7.4.5@@babel/runtime/helpers/ typeof.js?:33 module.exports = _typeof; ...
vue 报错 Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘ (BaseClient.js:1）
Youxingfang的博客
09-12 1226
atat。
vue项目报错Cannot assign to read only property ‘exports‘ of object ‘Object‘
kksw1121
07-27 1519
vue项目报错Cannot assign to read only property ‘exports’ of object ‘Object’，原因是commonJS和ES6的语法混用导致的 解决办法 安装 transform-es2015-modules-commonjs npm install transform-es2015-modules-commonjs 修改babel的配置文件，添加plugin ...
解决 TypeError: Cannot assign to read only property 'hospitalCode' of object 错误怎么解决
04-17
<think>好的，我现在需要帮助用户解决他们遇到的TypeError: Cannot assign to read only property 'hospitalCode'的错误。首先，我要理解这个错误的本质。根据用户提供的引用内容，这个错误通常发生在尝试修改一个只读属性时。用户提到的引用[2]和[3]都指出，这可能是因为模块导出方式的问题，或者在JavaScript中试图修改一个被设置为只读的属性。 首先，用户的问题具体是尝试修改对象中的'hospitalCode'属性时出错。我需要考虑几种可能的情况： 1. **对象属性被设置为只读**：可能是该属性在定义时使用了`Object.defineProperty`或类似方法，设置了`writable: false`，导致无法修改。用户可能在某个地方定义了这个属性，或者在框架/库中被设置为只读。 2. **模块导出问题**：引用[1]、[3]、[5]提到，当使用CommonJS的`exports`时，如果错误地尝试修改`exports`对象，可能会引发类似错误。用户可能在模块导出时错误地修改了`exports`，但根据用户的问题，错误是关于'hospitalCode'而不是'exports'，所以这可能不直接相关，但需要确认用户是否在模块导出中有相关操作。 3. **使用框架或库的限制**：比如在React中，状态对象可能是不可变的，直接修改状态可能导致此类错误。引用[4]中的例子显示，在React中尝试直接修改状态对象的属性会导致错误，解决方案是创建一个新对象。 接下来，我需要分析用户的具体情况。用户提到错误发生在'hospitalCode'属性上，这可能是在他们自己的代码中，或者是在处理某个库返回的对象。可能的解决步骤包括： - **检查对象是否被冻结或密封**：使用`Object.isFrozen`或`Object.isSealed`来确认对象是否被设置为不可修改。如果是，可能需要复制对象或重新创建。 - **使用不可变更新模式**：如在React中，状态不应直接修改，而是通过创建新对象来更新。例如，使用扩展运算符或`Object.assign`来创建新对象。 - **检查模块系统混合使用**：如果项目中同时使用了ES6的`import/export`和CommonJS的`require/module.exports`，可能会导致问题。需要统一模块语法，如引用[5]提到的，使用`export`代替`exports`。 此外，用户之前的问题关于React的useCallback，可能他们在使用React时遇到状态管理的错误。需要确认他们是否在尝试直接修改状态对象的属性，比如： ```javascript // 错误示例 const [state, setState] = useState({ hospitalCode: '123' }); state.hospitalCode = '456'; // 直接修改会导致错误 setState(state); ``` 正确的做法应该是： ```javascript setState(prev => ({ ...prev, hospitalCode: '456' })); ``` 或者使用扩展运算符创建新对象： ```javascript const newState = { ...state, hospitalCode: '456' }; setState(newState); ``` 另外，用户可能在使用第三方库返回的对象，这些对象可能是只读的。例如，Vue中的响应式对象或使用Object.freeze处理过的对象，这时需要深拷贝对象来修改属性。 还需要考虑是否在严格模式下，某些操作被禁止。不过，错误信息明确提到是只读属性，所以更可能是对象属性本身被设置为不可写。 总结解决方案步骤： 1. **确认对象是否可写**：检查对象属性描述符，确认是否可写。 2. **避免直接修改状态**：使用不可变更新，创建新对象。 3. **检查模块导出语法**：确保使用正确的ES6导出方式。 4. **深拷贝对象**：当处理不可变对象时，先复制再修改。 需要将这些步骤以清晰的方式呈现给用户，并提供代码示例，帮助他们理解和解决问题。同时，要提醒常见的错误场景，如直接修改状态、混合模块系统等，确保用户能针对性地检查自己的代码。</think>#### 解决方案：`TypeError: Cannot assign to read only property 'hospitalCode'` 该错误表示你正在尝试修改一个被设置为**只读属性（read-only property）**的对象字段`hospitalCode`。以下是分步解决方案： --- ### 一、核心原因定位 1. **属性被显式设置为只读** - 通过`Object.defineProperty(obj, 'hospitalCode', { writable: false })`定义 - 对象被`Object.freeze()`或`Object.seal()`处理过 2. **框架的不可变数据限制** - React/Vue等框架的响应式数据要求不可变更新 3. **模块导出冲突** - CommonJS与ES6模块混用时错误修改`exports`（虽与`hospitalCode`无直接关联，但需排查） --- ### 二、具体修复方法 #### 方法1：创建新对象（推荐） **适用场景**：React状态更新、Vue响应式数据等需要不可变更新的场景 ```javascript // 错误：直接修改原对象 ❌ obj.hospitalCode = 'newValue'; // 正确：创建新对象 ✅ const newObj = { ...obj, hospitalCode: 'newValue' }; // 扩展运算符 // 或 const newObj = Object.assign({}, obj, { hospitalCode: 'newValue' }); ``` #### 方法2：深拷贝对象 **适用场景**：处理第三方库返回的冻结对象 ```javascript // 使用JSON方式（注意会丢失函数/日期等特殊类型） const clonedObj = JSON.parse(JSON.stringify(obj)); clonedObj.hospitalCode = 'newValue'; // 使用lodash深拷贝 import { cloneDeep } from 'lodash'; const clonedObj = cloneDeep(obj); clonedObj.hospitalCode = 'newValue'; ``` #### 方法3：解除只读限制（慎用） **适用场景**：明确需要修改自有对象时 ```javascript // 检查属性是否可写 const descriptor = Object.getOwnPropertyDescriptor(obj, 'hospitalCode'); console.log(descriptor.writable); // 输出是否为true // 解除只读限制 Object.defineProperty(obj, 'hospitalCode', { writable: true }); obj.hospitalCode = 'newValue'; // 现在可以修改 ``` #### 方法4：检查模块规范（Webpack项目） 若错误涉及模块导出，需统一规范： ```javascript // 错误：CommonJS语法 ❌ exports.hospitalCode = 'value'; // 正确：ES6语法 ✅ export const hospitalCode = 'value'; ``` --- ### 三、React/Vue框架中的典型场景 #### React示例 ```jsx // 错误：直接修改state ❌ const [hospitalInfo, setHospitalInfo] = useState({ hospitalCode: '001' }); hospitalInfo.hospitalCode = '002'; setHospitalInfo(hospitalInfo); // 触发错误 // 正确：不可变更新 ✅ setHospitalInfo(prev => ({ ...prev, hospitalCode: '002' })); ``` #### Vue示例 ```javascript // 错误：直接修改props ❌ export default { props: ['hospitalCode'], methods: { updateCode() { this.hospitalCode = 'new'; // 触发只读错误 } } } // 正确：通过事件通知父组件修改 ✅ this.$emit('update:hospitalCode', 'newValue'); ``` --- ### 四、调试建议 1. **检查对象来源**： - 使用`console.log(Object.getOwnPropertyDescriptor(obj, 'hospitalCode'))`查看属性描述符 2. **追溯赋值操作**： - 在代码中搜索`hospitalCode`的所有修改位置 3. **框架调试工具**： - React DevTools检查Props/State是否被冻结 - Vue DevTools观察响应式数据变化 --- ### 典型错误场景排查表 | 场景 | 表现特征 | 解决方案 | |------|----------|----------| | 直接修改React状态 | 使用`useState`后直接赋值 | 改用扩展运算符创建新对象 | | Vue Props修改 | 在子组件中修改props字段 | 通过`emit`通知父组件修改 | | 第三方库返回对象 | 对象属性无法修改 | 深拷贝后操作新对象 | | Webpack模块混用 | 同时存在`import`和`module.exports` | 统一使用ES6模块语法 | --- 通过以上方法，90%以上的"read only property"错误可被解决。若问题依然存在，建议提供具体代码片段进一步分析[^2][^3][^5]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值