react-monaco-editor/monaco-editor JSON编辑器问题修复及webpack配置

效果展示：

问题： Python、JavaScript等语言每切换一次就会两次上述error，而JSON每打一个字就会出现一次上述error；；以上不影响代码高亮，但是无法实现代码补全等效果，最主要的调试器满屏红色很不好。

-------------------------------- ERROR1
errors.js:15 Uncaught Error: Unexpected usage

Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:492:1)
    at webWorker.js:38:1
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:492:1)
    at webWorker.js:38:1
    at errors.js:15:1
    
errors.js:15 Uncaught Error: Unexpected usage
-------------------------------- ERROR2
Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:492:1)
    at webWorker.js:38:1
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:492:1)
    at webWorker.js:38:1
    
-------------------------------- ERROR3
home:1 Uncaught SyntaxError: Unexpected token '<' (at home:1:1)

问题截图：

解决过程：

1. 深度搜索GitHub、stackflow等平台，发现这个错误很常见，monaco-editor出现的问题都会报这个错误，webpack配置，代码实现等都可能出现，很难定位到具体问题。
2. 沉下心来反复测试error出现时机并总结规律，发现只有JSON语言会出现大量error，且每输入一个字符都会报错，而其他语言只会在切换的时候固定报两次错误，由此定位到是JSON语言设置的问题。再次搜索网络，发现JSON语言是近几年添加的功能，能用的资料比较少，但可以肯定的是JSON有自己的worker而不是通用的worker。
3. 最后实在无法解决，只能去问GPT-4o,prompt如下：

我正在使用ReactMonacoEditor应用到JSON语言中时，每打一个字符就会出现以下错误：
Uncaught Error: Unexpected usage

Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:492:1)
    at webWorker.js:38:1
但是其他语言类型没有该报错，我该怎么解决

4. 给出的回答是可能在json编辑器配置出现错误

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import 'monaco-editor/esm/vs/language/json/json.worker.js';

    window.MonacoEnvironment = {
        getWorker: function (workerId, label) {
            if (label === 'json') {
                return new Worker(new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url));
            }
            return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url));
        }
    };

实际测试后发现，上面的两个import可以去掉，只需要在monaco配置的时候加入监听事件，区分JSON编辑器的worker和editor worker，在解决掉JSON报错的同时神奇般的解决了其他所有语言的报错，GPT yyds !

webpack配置如下，供使用的朋友参考~

module.exports = ({ onGetWebpackConfig }) => {
  onGetWebpackConfig((config) => {
    const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
    config.plugin('MonacoWebpackPlugin').use(
      new MonacoWebpackPlugin({
        languages: ['python', 'groovy', 'json', 'javascript', 'java'],
      }),
    );
  });
};