react-monaco-editor与worker-loader兼容问题及使用咨询

问题描述 #

react-monaco-editor无法与worker-loader搭配使用，添加worker-loader配置后构建过程抛出错误。

复现步骤 #

• 使用CRA创建新的TypeScript应用，运行react-monaco-editor最小演示示例，功能正常。
• 安装worker-loader并在config-overrides.js中添加相关配置，启动应用后出现构建报错。

报错信息 #

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

当前配置（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;
};

环境信息 #

• 操作系统：MacOS
• 浏览器：Chrome
• 打包工具：webpack5（CRA）
• 暂未计划提交PR修复该问题

解决方案 #

这个报错的核心原因是worker-loader与webpack 5不兼容——webpack 5已经原生支持Web Workers，无需依赖worker-loader；同时MonacoWebpackPlugin会自动处理monaco-editor自带的worker文件，不需要额外配置worker-loader规则。

修改config-overrides.js，移除worker-loader相关配置即可解决问题：

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
    };

    // 过滤掉worker-loader相关的规则
    config.module.rules = config.module.rules.filter(rule => {
        if (rule.test?.toString()) {
            const testRule = rule.test.toString();
            return !testRule.includes('.worker.js') && !testRule.includes('.worker.ts');
        }
        return true;
    });

    return config;
};

如果需要在项目中使用自定义Worker文件（非monaco自带），直接使用webpack 5的原生语法即可：

// 引入自定义Worker
const MyWorker = new Worker(new URL('./path/to/your.worker.ts', import.meta.url));

内容的提问来源于stack exchange，提问作者Observed Observer