如何修复与Webpack相关的错误:无法将对象'#< object >‘的'exports’属性赋给只读？

Question

我使用的是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

Answer 1

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

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

class Synapse {
  // ...
}

export default Synapse; // ES Module syntax

Answer 2

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

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

class Synapse {
  // ...
}

module.exports = {Synapse};