vue 运行时报错： Cannot assign to read only property 'exports' of object 'Object'

最新推荐文章于 2024-08-29 10:48:30 发布
最新推荐文章于 2024-08-29 10:48:30 发布
阅读量4.8k 收藏 3
点赞数 3
CC 4.0 BY-SA版权
分类专栏： js vue 文章标签： vue 报错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Gochan_Tao/article/details/88526391

背景

用 vue-cli 搭建的 vue 项目，引用了第三方插件，npm run dev 之后一直报错 error:Cannot assign to read only property ‘exports’ of object ‘#< object>’ ，查了好多资料好像是export和import共用了导致不兼容引起的，然后还是不起作用，最后参考了天地一扁舟的博客，完美解决。

解决方法

npm install babel-plugin-transform-es2015-modules-commonjs

然后在 babelrc中配置

{ “plugins”: [“transform-es2015-modules-commonjs”] }

即可解决

viser-vue打包编译运行报错Cannot assign to read only property ‘constructor‘ of object ‘#＜t＞‘
m0_49280365的博客
06-02 1142
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 607
问题截图 翻译： 不能赋值给对象'#<Object>'的只读属性'exports' 如果你使用了 @babel/plugin-transform-runtime 插件，同时你又在某个commonJS 规范写的文件里使用这个插件时，babel 会默认你这个文件是 ES6 的文件，然后就使用 import 导入了这个插件，但是 webpack 不可以混用这两种语法规范。 解决方法就是在 babel.config.js 配置文件中设置 unambiguous 字段。让 babel 和 webpac
Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
qq_37273844的博客
09-27 728
Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
vue Uncaught TypeError: Cannot assign to read only property 'exports' of object
smile_foreach的博客
12-19 286
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 删除node_modules 和package-lock.json 换成淘宝的cnpm镜像 重新cnpm install cnpm run dev即可 这个问题坑了我两三天 ...
vue-cli项目，自定义模块报错“Cannot assign to read only property 'exports' of object”问题解决方法
qq_36803108的博客
06-01 1329
删除根目录下.babelrc文件里“plugins”数组里的值，留一个空[]；
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法
12-09
当你遇到“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”这样的错误，通常是因为在同一个模块中混用了CommonJS（`require`和`module.exports`）和ES6模块（`import`...
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应用时，由于模块导入导出规范的...
Cannot assign to read only property '__esModule' of #Object 的问题
marko_zheng的博客
09-12 8064
Cannot assign to read only property ‘__esModule’ of #Object 的问题 问题背景： 我这里使用了Vue+elementUI构建的项目，项目中依赖echarts，webpack，babel等模块，打包后在高版本浏览器中没有问题，但是在低版本的浏览器中，谷歌1.7.X，或者IE8一下，就会报错 Cannot assign to read...
vue项目打包部署报错：Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
SM_Cute的博客
04-04 1127
vue项目打包部署报错：Cannot assign to read only property 'exports' of object '#'
Cannot assign to read only property 'exports' of object '#<Object>'
daxiangya6845的博客
08-30 453
运行一下以前的一个Vue+webpack的 vue仿新闻网站 小项目，报错 由于自己vue学习不深入，老是这个报错，找了好久（确切的说是整整一下午^...^）才找到原因 -v- Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 点开错误的...
Uncaught TypeError: Cannot assign to read only property 'exports' of object
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
12-20 2826
1. 错误： vue 运行时报错：Cannot assign to read only property 'exports' of object '#<Object>' 2. 解决过程： 搜索一些方法都是在说 webpack 同一个文件 不可以用 import 引入然后再用 module.exports 输出,只能用 export 输出 weeks.js module.export...
Uncaught TypeError: Cannot assign to read only property ‘exports‘ of object
weixin_58519918的博客
08-29 967
可以通过删除.balelrc文件中的"plugins":["transform-vue-jsx","transform-runtime"],中的"transform-runtime"来进行解决，之后需要删除node_modules文件重新加载。拉取别人vue项目出现，报错问题Uncaught TypeError: Cannot assign to read only property 'exports' of object。以及webpack版本过高。
Uncaught TypeError: Cannot assign to read only property 'exports' of object '
gz-郭小敏的博客
04-19 6223
1、问题描述 项目之前正常的路由配置是这样的： 2、路由配置说明 第一种做法： 每个页面模块目录通过一个 index.js 主入口来导出（module.exports）对应的vue文件，然后 router.js 中通过 require 方法去引入资源。 这一做法是没毛病的，因为这是组织（webpack 2）允许的。 第二种做法： 如果好好的require不用，非要用 impo...
Vue 解决Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
Lisa_Xiaotouzi的博客
11-15 4515
某js文件引用其他js文件 发现问题：没有引入import之前是对的，引入之后就报错了！！！但是单独使用又没有问题！！！ 错误原因：vue项目的 文件中 import 和module.exports 不能混用 解决：把module.exports 改为export default就可以了 破问题，坑死俺了！ ...
Cannot assign to read only property exports of object
Evan's Blog ٩(๑❛ᴗ❛๑)۶
02-03 3004
一、问题介绍： 在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; ^ T...
Cannot assign to read only property 'exports' of object Object
mary_123789的博客
05-07 237
当f12时，出现Cannot assign to read only property 'exports' of object '#<Object>'这个错误时， 在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。 因为webpack 2中不允许混用import和module.exports ...
Cannot assign to read only property ‘exports’ of object ‘#’解决方案
chenping的博客
05-29 1227
vue运行报错error:Cannot assign to read only property ‘exports’ of object '#' 用weex做项目的时候，npm start 之后一直报错error:Cannot assign to read only property ‘exports’ of object ‘#’ ，查了好多资料好像是export和import共用了导致不兼容引起的 试了好多方法都不行，最后找到个办法，试了一下可以用，特此记录： npm install babel-plug
解决 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]。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值