当我在演示中创建摩纳哥编辑器时，出现错误：`EditorSimpleWorker.loadForeignModule 的意外使用`

Question

当我在演示中创建摩纳哥编辑器时 https://github.com/liaodalin19903/react-test-02

我收到错误：

Unexpected usage
    at EditorSimpleWorker.loadForeignModule (http://localhost:3000/static/js/bundle.js:115802:27)
    at http://localhost:3000/static/js/bundle.js:64917:22
    at async http://localhost:3000/static/js/vendors-node_modules_pnpm_monaco-editor_0_50_0_node_modules_monaco-editor_esm_vs_language_typ-3cc9a5.chunk.js:118:16
    at async WorkerManager.getLanguageServiceWorker (http://localhost:3000/static/js/vendors-node_modules_pnpm_monaco-editor_0_50_0_node_modules_monaco-editor_esm_vs_language_typ-3cc9a5.chunk.js:124:20)
    at async DiagnosticsAdapter._doValidate (http://localhost:3000/static/js/vendors-node_modules_pnpm_monaco-editor_0_50_0_node_modules_monaco-editor_esm_vs_language_typ-3cc9a5.chunk.js:423:20)

---

当我遵循这个示例时： 浏览器-esm-webpack-typescript-react

用于添加 MonacoEnvironment 配置：

// @ts-ignore
self.MonacoEnvironment = {
    getWorkerUrl: function (_moduleId: any, label: string) {
        if (label === 'json') {
            return './json.worker.bundle.js';
        }
        if (label === 'css' || label === 'scss' || label === 'less') {
            return './css.worker.bundle.js';
        }
        if (label === 'html' || label === 'handlebars' || label === 'razor') {
            return './html.worker.bundle.js';
        }
        if (label === 'typescript' || label === 'javascript') {
            return './ts.worker.bundle.js';
        }
        return './editor.worker.bundle.js';
    }
};

我会收到错误：

ERROR
Uncaught SyntaxError: Unexpected token '<'
    at handleError (http://localhost:3000/static/js/bundle.js:242472:58)
    at http://localhost:3000/static/js/bundle.js:242491:7
ERROR
Unexpected usage

Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (http://localhost:3000/static/js/bundle.js:115821:27)
    at http://localhost:3000/static/js/bundle.js:64936:22
    at async http://localhost:3000/static/js/vendors-node_modules_pnpm_monaco-editor_0_50_0_node_modules_monaco-editor_esm_vs_language_typ-3cc9a5.chunk.js:118:16
Error: Unexpected usage

Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (http://localhost:3000/static/js/bundle.js:115821:27)
    at http://localhost:3000/static/js/bundle.js:64936:22
    at async http://localhost:3000/static/js/vendors-node_modules_pnpm_monaco-editor_0_50_0_node_modules_monaco-editor_esm_vs_language_typ-3cc9a5.chunk.js:118:16
    at http://localhost:3000/static/js/bundle.js:35081:17

Answer 1

您需要使用 MonacoWebpackPlugin 或按照示例

中的方式设置 webpack 配置