如何修复与 Webpack 相关的错误：无法分配给对象 '#<Object>' 的只读属性 'exports'？答案

【问题标题】：How can I fix Webpack related error: Cannot assign to read only property 'exports' of object '#<Object>'?如何修复与 Webpack 相关的错误：无法分配给对象 '#<Object>' 的只读属性 'exports'？
【发布时间】：2026-01-21 06:20:02
【问题描述】：

我正在使用 webpack，如果我理解正确，它不支持本地 webworker 语法，所以我尝试使用 worker-loader npm 模块，但我遇到了一个奇怪的错误。

模块可以在here找到。

我的 webpack 配置：

module.exports = {
    entry: "./app",
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    watch: true,
    module: {
        rules: [{
            test: /\.worker\.js$/,
            use: {
                loader: 'worker-loader'
            }
        }]
    }
}

我的代码触发错误：

import Worker from '../workers/sim.js';

class Synapse {
  // ...
}

module.exports = Synapse;

错误：

Cannot assign to read only property 'exports' of object '#<Object>'?

指向module.exports = Synapse

【问题讨论】：

标签： node.js webpack

【解决方案1】：

将 CommonJS module.exports 与 ES 模块混合时会出现此错误。您必须将 module.exports 更改为对应的 ES 模块 export default：

import Worker from '../workers/sim.js';

class Synapse {
  // ...
}

export default Synapse; // ES Module syntax

【讨论】：

我注意到我必须使用 import 而不是 require 来检索该模块，然后依次将其他文件混合 commonJS require 语法和 import 语法中断，所以如果说在这种情况下使用import 会产生连锁反应，基本上迫使我将项目中的所有require 调用更改为import，这是否正确？
从 Babel 6 开始，default export 的行为发生了变化，因此您需要使用以下语法：require("./Synapse").default 而不是 require("./Synapse")。幸运的是，有一个 Babel 插件可以恢复旧的行为，如果你有许多使用旧语法的模块，这很有用：github.com/59naga/babel-plugin-add-module-exports。正如您所提到的，另一种选择是将您的 require 调用更改为 ES Module imports

【解决方案2】：

你正在同一个文件中进行导入和导出，这是 webpack 不允许的最好这样做

const {Worker} = require('../workers/sim.js');

class Synapse {
  // ...
}

module.exports = {Synapse};

【讨论】：