[已解决] Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘#’

[已解决] Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘#’

写在前面

在前端开发中，当我们使用模块化（如 CommonJS 或 ES6 模块）来组织代码时，可能会遇到 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#' 这样的错误。此错误表明我们试图给一个不可修改的对象（即只读对象）的 exports 属性赋值。通常，这个问题与模块导出机制以及 Webpack 等打包工具的配置有关。

问题描述

报错代码行：

module.exports = someFunction;

错误信息：

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'

报错原因分析

1. 模块系统冲突：在使用 ES6 模块导入/导出机制时，module.exports 是 CommonJS 模块的导出方式。两者不兼容，可能导致在代码中试图同时使用两种模块系统时发生冲突。
2. 打包工具的配置问题：Webpack 等打包工具可能会将某些库或模块视为只读模块。在打包过程中，如果配置错误或默认设置不兼容，也可能导致此类问题。
3. 模块导出属性的只读设置：某些库可能明确声明其 exports 属性为只读，导致在代码中修改 exports 时抛出此错误。
4. 加载顺序或混合模块规范：如果使用了多种模块规范（如同时使用 ES6 和 CommonJS），可能会导致模块的加载顺序出现问题，从而触发此错误。

解决思路

1. 统一模块规范：确保项目中统一使用 ES6 模块或 CommonJS 模块，避免混用两种模块系统。
2. 检查 Webpack 配置：确保 Webpack 配置正确，尤其是在处理第三方库时，避免将只读属性模块重新导出。
3. 避免修改只读属性：通过正确的方式进行模块导出或重新导出，避免直接对只读属性进行修改。
4. 使用 Polyfill 或配置兼容性：对于一些旧版库，可能需要通过 Polyfill 或兼容性设置，确保模块系统的兼容性。

解决办法

1. 使用 ES6 模块的导出方式

如果项目中已经使用了 ES6 模块导出方式，那么不要使用 module.exports，改为使用 export：

// 使用 ES6 模块导出
export default someFunction;

如果需要导出多个函数或变量，可以使用命名导出：

export const myFunction = () => { ... };
export const myVariable = 42;

2. 统一使用 CommonJS 导出

如果项目使用的是 CommonJS 规范，那么确保使用 module.exports 或 exports，不要混用 ES6 模块语法：

module.exports = someFunction;

在这种情况下，应避免同时使用 import 和 export，而使用 require() 进行模块导入：

const someFunction = require('./someModule');

3. 修改 Webpack 配置

如果问题与 Webpack 配置有关，可以通过检查 output.libraryTarget 配置项，确保正确导出模块。例如，将导出方式设置为 umd，以支持 CommonJS 和 ES6 模块：

module.exports = {
  output: {
    libraryTarget: 'umd'
  }
};

这种方式可以确保模块可以在多种环境中正常使用。

4. 使用 Babel 进行转码

如果项目中混用了 ES6 模块和 CommonJS 模块，可以使用 Babel 将代码转译为兼容的形式。确保 Babel 的配置支持模块系统的兼容性：

npm install @babel/preset-env --save-dev

在 .babelrc 文件中配置模块化支持：

{
  "presets": [
    ["@babel/preset-env", { "modules": "commonjs" }]
  ]
}

这样，Babel 会将 ES6 模块语法转译为 CommonJS 格式，确保项目兼容性。

5. 使用 Object.defineProperty 来避免修改只读属性

在某些特殊情况下，如果确实需要修改只读属性，可以使用 Object.defineProperty 方法，手动修改对象的属性定义：

Object.defineProperty(module, 'exports', {
  writable: true,
  value: someFunction
});

这样可以解除属性的只读限制，但通常不建议这样做，除非有特殊需求。

总结

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#' 错误通常是由于模块导出方式或工具配置不当引起的。通过统一模块规范、检查 Webpack 等工具的配置、避免对只读属性进行修改，通常可以解决此问题。在模块系统混用时，使用 Babel 进行转码是确保兼容性的有效手段。