How can I fix Webpack related error: Cannot assign to read only property 'exports' of object '#<Object>'?

Question

I'm using webpack, which, if I understand correctly, doesn't support native webworker syntax, so I'm trying to use the worker-loader npm module, but I'm getting a weird error.

The module can be found here.

My webpack config:

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

My code triggering the error:

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

class Synapse {
  // ...
}

module.exports = Synapse;

Error:

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

which points to module.exports = Synapse

Answer 1

You'll get this error when mixing the CommonJS module.exports with ES Modules. You'll have to change module.exports to its ES Module counterpart export default:

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

class Synapse {
  // ...
}

export default Synapse; // ES Module syntax