如何使用react-monaco-editor与worker-loader?

Question

描述bugReact-monaco-editor不能与worker-loader一起使用。

繁殖

1. 用CRA创建一个新的typescript应用，运行一个min react-monaco-editor演示。(一切正常)

2. 安装worker loader并在config- rides.js中添加config，然后启动app。

示例repo复制

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- rides.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

• Bundler webpack5 (CRA)

• []我将尝试发送一个pull request来解决这个问题。

Answer 1

我已经解决了。这似乎不是react-monaco-editor或monaco-editor的问题。

问题出在worker-loader和monaco-editor-webpack-plugin之间。

我暂时更新了我的worker-loader配置，只匹配src文件夹中的worker，并解决了这个问题。

最好弄清楚如何在monaco-editor-webpack-plugin中配置它，因为它的构建文件包含来自monaco-editor的worker，没有hashcode。