Cannot assign to read only property '__esModule' of #Object 的问题

最新推荐文章于 2025-05-26 01:00:15 发布
最新推荐文章于 2025-05-26 01:00:15 发布
阅读量8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 网络学习日志 vue 文章标签： __esModule error
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/marko_zheng/article/details/82660311
本文介绍了在Vue+elementUI项目中遇到的`Cannot assign to read only property '__esModule' of #Object`错误，特别是在低版本浏览器如Chrome 1.7.x和IE8以下时。通过尝试多种解决方案，最终在Webpack配置中添加client.js文件来解决问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Cannot assign to read only property ‘__esModule’ of #Object 的问题

问题背景：

我这里使用了Vue+elementUI构建的项目，项目中依赖echarts，webpack，babel等模块，打包后在高版本浏览器中没有问题，但是在低版本的浏览器中，谷歌1.7.X，或者IE8一下，就会报错

Cannot assign to read only property '__esModule' of #Object

解决方案

对于webpack 1.0，只需设置loose：当你使用babel-preset-env时为true。但是对于Webpack 2，loose模式无法解决此问题。

在stackoverflow上找到了好多解决方案，但是都没有解决我的问题，最后采用了一种方法

在build中添加了一个client.js文件

// client_patch.js, For Android 4.0
var defineProperty =
最低0.47元/天 解锁文章

200万优质内容无限畅学
vue篇 - vue-element-admin项目，路由跳转报错Cannot read property ‘__esModule‘ of undefined
weixin_41284629的博客
01-18 2206
vue篇 - vue-element-admin项目，路由跳转报错Cannot read property ‘__esModule’ of undefined 在项目下面store/modules/permission.js文件下更改引入方式 /** * 后台查询的菜单数据拼接成路由格式的数据 * @param routes * @param data * @param is_children */ // 之前我是用的这种方式 component: item.component === '#' ? Layo
React TypeScript小白的首选坑（二） 【TypeError: Cannot assign to read only property ‘name‘ of object】
Aym_zzz的博客
08-26 4594
这是一个美丽的错误，事情发生在一个美丽的下午。 一个objectList，需要对它进行增、删、改的操作，如下： //定义对象 interface IObject{ name:string, label:string } let objectList: =[{ "name": "a", "label": "A" }, { "name": "b", "label": "B" .
TypeError： Cannot assign to read only property ' xxx' of object '# Object '
yssa1125001的博客
04-13 1万+
使用vue.js时报错，错误如下 错误原因：粗心大意，把“相等比较”变成了“赋值操作” 解决办法：改成双等号“==”就可以了。
ES_Module基础（一）
最新发布
chestnut_orenge的博客
05-26 1385
ES Module是ECMAScript 2015引入的模块化规范，通过export和import关键字实现模块的导入导出。与CommonJS等社区规范不同，ES Module采用静态分析，支持具名导出和默认导出(default)。使用时需注意：浏览器中需添加type="module"属性，文件需通过服务访问；支持动态导入(import函数)和元数据(import.meta)；解析流程分为构建、实例化、运行三个阶段。npm作为Node包管理工具，可方便管理模块依赖和版本控制。ES Mod
vue项目启动报错Uncaught TypeError: Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
Lavante的博客
01-09 989
plugins中的 transform-runtime删除或注释掉可解决。修改根目录下的.babelrc 文件。
TypeError: Cannot assign to read only property ‘xxx‘ of object ‘#＜Object＞‘
你若盛开，清风自来
03-07 1471
错误通常是由于尝试修改一个被冻结或标记为只读的对象属性引起的。使用的替代方案：如或仅冻结需要冻结的属性。使用readonly关键字：在ES2020及以后的版本中，使用readonly关键字声明只读属性。避免修改全局对象的只读属性：确保全局对象属性不是只读的，或在严格模式下谨慎使用。通过这些方法，开发者可以提高代码的健壮性，减少运行时错误，提升应用的稳定性和用户体验。建议开发者定期检查和测试代码，确保所有对象属性的可修改状态符合预期。
报错Cannot assign to read only property ‘remark‘ of object ‘#＜Object＞‘
qq_40576178的博客
06-30 8858
问题： 对象中属性无法修改并报错Cannot assign to read only property ‘remark’ of object ‘#’ 从报错信息得出：无法修改只读属性remark，就考虑到使用底层Object.defineProperty将remark修改为可写的状态，但依旧报错，最终一下方法解决 解决方案： 我是使用ES6深拷贝大法解决的，若有更好的解决办法 欢迎各位大佬的方案 ...
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应用时，由于模块导入导出规范的...
使用 babel-loader 打包 ES6 代码出现Cannot assign to read only property ‘exports’ of object ‘#‘解决
缚己
01-22 602
问题截图 翻译： 不能赋值给对象'#<Object>'的只读属性'exports' 如果你使用了 @babel/plugin-transform-runtime 插件，同时你又在某个commonJS 规范写的文件里使用这个插件时，babel 会默认你这个文件是 ES6 的文件，然后就使用 import 导入了这个插件，但是 webpack 不可以混用这两种语法规范。 解决方法就是在 babel.config.js 配置文件中设置 unambiguous 字段。让 babel 和 webpac
VUE报错Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
zxw08611的专栏
03-03 769
异常： Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' at Module.eval (webpack-internal:///./node_modules/core-js/modules/_is-object.js:5) at eval (webpack-internal:///./node_modules/core-js/modules/_is-o...
Vue的报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'...
dongjiong0213的博客
06-16 2983
Vue的报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 1.运行一下以前的一个Vue+webpack的vue仿新闻网站 小项目，报错 由于自己vue学习不深入，老是这个报错，找了好久（确切的说是整整一下午^...^）才找到...
Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
web_ding的博客
11-01 4226
背景：在一个旧项目中，发现重新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..
vue项目打包部署报错：Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
SM_Cute的博客
04-04 1094
vue项目打包部署报错：Cannot assign to read only property 'exports' of object '#'
报错TypeError: Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘ at Module.eval
m0_61995372的博客
02-24 1368
为了解决这个问题，你可以检查你的代码，确保没有直接修改 `exports` 对象的操作。这意味着你应该使用 `export` 关键字来导出模块中的变量、函数或类，而不是直接操作 `exports` 对象。然而，在 webpack 中，它会将模块转换为 ES6 模块，并使用 `export` 关键字来导出模块，而不是使用 `exports` 对象。通常，这种错误会出现在尝试修改已导出的对象时，比如在 CommonJS 模块中直接对 `exports` 进行赋值操作。
【vue报错解决方法--cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘】
m0_57426442的博客
11-01 576
快速解决问题
Cocos Creator: [PreviewInEditor] Cannot assign to read only property ‘x‘ of object ‘[object Object]
weixin_45677723的博客
12-12 807
【代码】Cocos Creator: [PreviewInEditor] Cannot assign to read only property ‘x‘ of object ‘[object Object]
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 '#<Object>' ，文件名大小写问题！！！...
weixin_30737363的博客
09-09 952
有些坑不知道怎么就掉进去，可能一辈子都爬不起来！！！ 一、错误描述 昨天还好好的，今天早上来从git获取了一下别人提交的代码就出错了！而提交代码的人 运行一点错误都没有！！！ cya@KQ-101 MINGW64 /e/Source/Repos/ProjectManagement/WebUI (master) //这行是vscode自动显示的。 $ npm run d...
Cannot assign to read only property 'data' of object '#<ImageData>
10-23
这个错误提示"Cannot assign to read only property 'data' of object '#<ImageData>'"意味着你在JavaScript中尝试修改一个ImageData对象的"data"属性，但是该属性已经被声明为只读（read-only）。ImageData对象是HTML5 Canvas API的一部分，用于表示图片的像素信息，它的数据一旦创建就不可更改。 例如，当你使用`ctx.getImageData(x, y, width, height)`从Canvas上获取图像数据后，得到的就是一个ImageData对象，你不能直接通过`imageData.data = somethingNew`来改变数据。如果你想更新数据，你应该使用其他方法，比如： 1. **复制ImageData**：首先获取原始数据，然后创建新的ImageData对象再赋值给它。 ```javascript const imageData = ctx.getImageData(x, y, width, height); const modifiedData = new ImageData(imageData.width, imageData.height); modifiedData.data.set(imageData.data); ctx.putImageData(modifiedData, x, y); ``` 2. **使用ImageData的copy方法**：如果想要部分替换数据，可以先复制原数据，然后再覆盖需要的部分。 ```javascript const sourceData = ctx.getImageData(x, y, width, height); const targetData = sourceData.subImageData(x2, y2, width2, height2); targetData.data = somethingNew; // 可以在这里修改目标数据 ctx.putImageData(targetData, x + x2, y + y2); ``` 记住，对于不可更改的数据，你只能读取，而不能直接修改它们。如果你需要长期修改或编辑，可能需要重新加载或绘制图像到canvas上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值