how to use react-monaco-editor together with worker-loader?

Question

Describe the bug react-monaco-editor cannot be used together with worker-loader.

To Reproduce

1. create a new typescript app with CRA, run a min react-monaco-editor demo. (everything is fine)

2. install worker loader and add config in config-overrides.js, and start app.

example repo to reproduce

ERROR in ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js
  Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
  TypeError: Cannot read properties of undefined (reading 'replace')
      at getDefaultChunkFilename (/Users//Documents/test/my-project/node_modules/worker-loader/dist/utils.js:23:24)
      at Object.pitch (/Users//Documents/test/my-project/node_modules/worker-loader/dist/index.js:61:108)

  Child vs/editor/editor compiled with 1 error

  assets by status 1.27 KiB [cached] 1 asset
  ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js 39 bytes [not cacheable] [built] [1 error]
    

  ERROR in ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js
  Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
  TypeError: Cannot read properties of undefined (reading 'replace')
      at getDefaultChunkFilename (/Users//Documents/test/my-project/node_modules/worker-loader/dist/utils.js:23:24)
      at Object.pitch (/Users//Documents/test/my-project/node_modules/worker-loader/dist/index.js:61:108)

  Child vs/language/json/jsonWorker compiled with 1 error

details of my config-overrides.js

const webpack = require('webpack');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function override(config, env) {
    config.plugins.push(
        new MonacoWebpackPlugin({
            languages: ['json']
        })
    );
    config.stats = {
        children: true
    }
    config.module.rules.push(
        {
            test: /\.worker\.js$/,
            use: {
                loader: 'worker-loader',
                options: {
                    inline: 'fallback',
                    filename: '[contenthash].worker.js',
                },
            },
        },
        {
            test: /\.worker\.ts$/,
            use: [
                {
                    loader: 'worker-loader',
                    options: {
                        inline: 'fallback',
                        filename: '[contenthash].worker.js',
                    },
                },
                'ts-loader',
            ],
        },
    );
    return config;
};

Environment (please complete the following information):

• OS: MacOS

• Browser Chrome

• Bundler webpack5 (CRA)

• [ ] I will try to send a pull request to fix this issue.

Answer 1

I have solved it. It seems not to be a problem of react-monaco-editor or monaco-editor.

The problem is between worker-loader and monaco-editor-webpack-plugin.

I temporarily update my worker-loader config to match workers in my src folder only and solve this problem.

It could be better to figure out how to configure it in monaco-editor-webpack-plugin because it build files contains worker from monaco-editor without hashcode.