search

microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
39.86k stars 3.56k forks source link

[Bug] Vite5+electron+monaco, load ts worker exception: Editor.vue:34 Uncaught TypeError: require2 is not a function #4618

Open duhbbx opened 1 month ago

duhbbx commented 1 month ago

Reproducible in vscode.dev or in VS Code Desktop?

Reproducible in the monaco editor playground?

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

.ts
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

// @ts-ignore
self.MonacoEnvironment = {
  getWorker(_: any, label: string) {
    if (label === 'json') {
      return new jsonWorker();
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker();
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker();
    }
    if (label === 'typescript' || label === 'javascript') {
      console.log("使用ts worker........................")
      return new tsWorker();
    }
    return new editorWorker();
  }
};

monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);

```ts
const selectedLanguage = ref<string>('javascript');

// 在组件挂载时初始化 Monaco Editor
onMounted(() => {
  if (editorContainer.value) {
    editor = monaco.editor.create(editorContainer.value, {
      value: `function hello() { console.log("Hello, world!"); }`,
      language: selectedLanguage.value,
      theme: 'vs-light',
      automaticLayout: true,
      minimap: {
        enabled: false
      },
      renderLineHighlight: 'all',
    });
  }
});

// 方法：切换编辑器语言
const changeLanguage = () => {
  if (editor) {
    const model = editor.getModel();
    if (model) {
      monaco.editor.setModelLanguage(model, selectedLanguage.value);
    }
  }
};

// 方法：格式化代码
const formatCode = async () => {
  if (editor) {
    try {
      const action = editor.getAction('editor.action.formatDocument');
      if (action) {
        console.log("editor action exists, attempting to run...");
        await action.run();
        console.log("Code formatted successfully.");
      } else {
        console.log("Format document action not found.");
      }
    } catch (error) {
      console.error("An error occurred while formatting the document:", error);
    }
  } else {
    console.log("Editor not initialized.");
  }
};

### Reproduction Steps

_No response_

### Actual (Problematic) Behavior

![image](https://github.com/user-attachments/assets/4de59bc4-4e66-4e19-91f0-7e0d82ed2489)

```ts
Editor.vue:34 Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/microsoft/monaco-editor#faq
logOnceWebWorkerWarning @ chunk-YZ73PEPD.js?v=ebcf444d:39847
(anonymous) @ chunk-YZ73PEPD.js?v=ebcf444d:40247
error (async)
(anonymous) @ chunk-YZ73PEPD.js?v=ebcf444d:40207
Promise.then (async)
WebWorker @ chunk-YZ73PEPD.js?v=ebcf444d:40201
create @ chunk-YZ73PEPD.js?v=ebcf444d:40246
SimpleWorkerClient @ chunk-YZ73PEPD.js?v=ebcf444d:40028
_getOrCreateWorker @ chunk-YZ73PEPD.js?v=ebcf444d:44981
_getProxy @ chunk-YZ73PEPD.js?v=ebcf444d:44990
_getForeignProxy @ chunk-YZ73PEPD.js?v=ebcf444d:45106
getProxy @ chunk-YZ73PEPD.js?v=ebcf444d:45130
(anonymous) @ tsMode-P2VZLDD5.js?v=ebcf444d:81
_getClient @ tsMode-P2VZLDD5.js?v=ebcf444d:82
getLanguageServiceWorker @ tsMode-P2VZLDD5.js?v=ebcf444d:87
worker @ tsMode-P2VZLDD5.js?v=ebcf444d:1117
_doValidate @ tsMode-P2VZLDD5.js?v=ebcf444d:368
maybeValidate @ tsMode-P2VZLDD5.js?v=ebcf444d:301
onModelAdd @ tsMode-P2VZLDD5.js?v=ebcf444d:326
(anonymous) @ tsMode-P2VZLDD5.js?v=ebcf444d:361
DiagnosticsAdapter @ tsMode-P2VZLDD5.js?v=ebcf444d:361
registerProviders @ tsMode-P2VZLDD5.js?v=ebcf444d:1211
setupMode @ tsMode-P2VZLDD5.js?v=ebcf444d:1214
setupJavaScript @ tsMode-P2VZLDD5.js?v=ebcf444d:1093
(anonymous) @ chunk-IUM3FXTN.js?v=ebcf444d:275
Promise.then (async)
(anonymous) @ chunk-IUM3FXTN.js?v=ebcf444d:275
(anonymous) @ chunk-YZ73PEPD.js?v=ebcf444d:118889
_deliver @ chunk-YZ73PEPD.js?v=ebcf444d:2407
_deliverQueue @ chunk-YZ73PEPD.js?v=ebcf444d:2416
fire @ chunk-YZ73PEPD.js?v=ebcf444d:2437
requestRichLanguageFeatures @ chunk-YZ73PEPD.js?v=ebcf444d:88158
TextModel2 @ chunk-YZ73PEPD.js?v=ebcf444d:29744
_createModelData @ chunk-YZ73PEPD.js?v=ebcf444d:96150
createModel @ chunk-YZ73PEPD.js?v=ebcf444d:96190
doCreateModel @ chunk-YZ73PEPD.js?v=ebcf444d:117432
createTextModel @ chunk-YZ73PEPD.js?v=ebcf444d:117429
StandaloneEditor2 @ chunk-YZ73PEPD.js?v=ebcf444d:117307
_createInstance @ chunk-YZ73PEPD.js?v=ebcf444d:110869
createInstance @ chunk-YZ73PEPD.js?v=ebcf444d:110844
create2 @ chunk-YZ73PEPD.js?v=ebcf444d:118094
(anonymous) @ Editor.vue:34
(anonymous) @ chunk-MYK6SCES.js?v=ebcf444d:3015
callWithErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1678
callWithAsyncErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1685
hook.__weh.hook.__weh @ chunk-MYK6SCES.js?v=ebcf444d:2995
flushPostFlushCbs @ chunk-MYK6SCES.js?v=ebcf444d:1861
flushJobs @ chunk-MYK6SCES.js?v=ebcf444d:1901
Promise.then (async)
queueFlush @ chunk-MYK6SCES.js?v=ebcf444d:1801
queueJob @ chunk-MYK6SCES.js?v=ebcf444d:1795
(anonymous) @ chunk-MYK6SCES.js?v=ebcf444d:6563
resetScheduling @ chunk-MYK6SCES.js?v=ebcf444d:516
instrumentations.<computed> @ chunk-MYK6SCES.js?v=ebcf444d:686
handleSelect @ App.vue:28
callWithErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1678
callWithAsyncErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1685
emit @ chunk-MYK6SCES.js?v=ebcf444d:7643
(anonymous) @ chunk-MYK6SCES.js?v=ebcf444d:9346
handleClick @ MenuTree.vue:55
callWithErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1678
callWithAsyncErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1685
emit @ chunk-MYK6SCES.js?v=ebcf444d:7643
(anonymous) @ chunk-MYK6SCES.js?v=ebcf444d:9346
onInternalClick @ ant-design-vue.js?v=b26240e2:35087
onInternalClick @ ant-design-vue.js?v=b26240e2:33092
callWithErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1678
callWithAsyncErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1685
invoker @ chunk-MYK6SCES.js?v=ebcf444d:10331
Show 62 more frames
Show less
Editor.vue:34 Uncaught TypeError: require2 is not a function
logOnceWebWorkerWarning @ chunk-YZ73PEPD.js?v=ebcf444d:39849
(anonymous) @ chunk-YZ73PEPD.js?v=ebcf444d:40247
error (async)
(anonymous) @ chunk-YZ73PEPD.js?v=ebcf444d:40207
Promise.then (async)
WebWorker @ chunk-YZ73PEPD.js?v=ebcf444d:40201
create @ chunk-YZ73PEPD.js?v=ebcf444d:40246
SimpleWorkerClient @ chunk-YZ73PEPD.js?v=ebcf444d:40028
_getOrCreateWorker @ chunk-YZ73PEPD.js?v=ebcf444d:44981
_getProxy @ chunk-YZ73PEPD.js?v=ebcf444d:44990
_getForeignProxy @ chunk-YZ73PEPD.js?v=ebcf444d:45106
getProxy @ chunk-YZ73PEPD.js?v=ebcf444d:45130
(anonymous) @ tsMode-P2VZLDD5.js?v=ebcf444d:81
_getClient @ tsMode-P2VZLDD5.js?v=ebcf444d:82
getLanguageServiceWorker @ tsMode-P2VZLDD5.js?v=ebcf444d:87
worker @ tsMode-P2VZLDD5.js?v=ebcf444d:1117
_doValidate @ tsMode-P2VZLDD5.js?v=ebcf444d:368
maybeValidate @ tsMode-P2VZLDD5.js?v=ebcf444d:301
onModelAdd @ tsMode-P2VZLDD5.js?v=ebcf444d:326
(anonymous) @ tsMode-P2VZLDD5.js?v=ebcf444d:361
DiagnosticsAdapter @ tsMode-P2VZLDD5.js?v=ebcf444d:361
registerProviders @ tsMode-P2VZLDD5.js?v=ebcf444d:1211
setupMode @ tsMode-P2VZLDD5.js?v=ebcf444d:1214
setupJavaScript @ tsMode-P2VZLDD5.js?v=ebcf444d:1093
(anonymous) @ chunk-IUM3FXTN.js?v=ebcf444d:275
Promise.then (async)
(anonymous) @ chunk-IUM3FXTN.js?v=ebcf444d:275
(anonymous) @ chunk-YZ73PEPD.js?v=ebcf444d:118889
_deliver @ chunk-YZ73PEPD.js?v=ebcf444d:2407
_deliverQueue @ chunk-YZ73PEPD.js?v=ebcf444d:2416
fire @ chunk-YZ73PEPD.js?v=ebcf444d:2437
requestRichLanguageFeatures @ chunk-YZ73PEPD.js?v=ebcf444d:88158
TextModel2 @ chunk-YZ73PEPD.js?v=ebcf444d:29744
_createModelData @ chunk-YZ73PEPD.js?v=ebcf444d:96150
createModel @ chunk-YZ73PEPD.js?v=ebcf444d:96190
doCreateModel @ chunk-YZ73PEPD.js?v=ebcf444d:117432
createTextModel @ chunk-YZ73PEPD.js?v=ebcf444d:117429
StandaloneEditor2 @ chunk-YZ73PEPD.js?v=ebcf444d:117307
_createInstance @ chunk-YZ73PEPD.js?v=ebcf444d:110869
createInstance @ chunk-YZ73PEPD.js?v=ebcf444d:110844
create2 @ chunk-YZ73PEPD.js?v=ebcf444d:118094
(anonymous) @ Editor.vue:34
(anonymous) @ chunk-MYK6SCES.js?v=ebcf444d:3015
callWithErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1678
callWithAsyncErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1685
hook.__weh.hook.__weh @ chunk-MYK6SCES.js?v=ebcf444d:2995
flushPostFlushCbs @ chunk-MYK6SCES.js?v=ebcf444d:1861
flushJobs @ chunk-MYK6SCES.js?v=ebcf444d:1901
Promise.then (async)
queueFlush @ chunk-MYK6SCES.js?v=ebcf444d:1801
queueJob @ chunk-MYK6SCES.js?v=ebcf444d:1795
(anonymous) @ chunk-MYK6SCES.js?v=ebcf444d:6563
resetScheduling @ chunk-MYK6SCES.js?v=ebcf444d:516
instrumentations.<computed> @ chunk-MYK6SCES.js?v=ebcf444d:686
handleSelect @ App.vue:28
callWithErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1678
callWithAsyncErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1685
emit @ chunk-MYK6SCES.js?v=ebcf444d:7643
(anonymous) @ chunk-MYK6SCES.js?v=ebcf444d:9346
handleClick @ MenuTree.vue:55
callWithErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1678
callWithAsyncErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1685
emit @ chunk-MYK6SCES.js?v=ebcf444d:7643
(anonymous) @ chunk-MYK6SCES.js?v=ebcf444d:9346
onInternalClick @ ant-design-vue.js?v=b26240e2:35087
onInternalClick @ ant-design-vue.js?v=b26240e2:33092
callWithErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1678
callWithAsyncErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1685
invoker @ chunk-MYK6SCES.js?v=ebcf444d:10331
Show 62 more frames
Show less
Editor.vue:34 Uncaught TypeError: require2 is not a function
logOnceWebWorkerWarning @ chunk-YZ73PEPD.js?v=ebcf444d:39849
(anonymous) @ chunk-YZ73PEPD.js?v=ebcf444d:44991
Promise.then (async)
_getProxy @ chunk-YZ73PEPD.js?v=ebcf444d:44990
_getForeignProxy @ chunk-YZ73PEPD.js?v=ebcf444d:45106
getProxy @ chunk-YZ73PEPD.js?v=ebcf444d:45130
(anonymous) @ tsMode-P2VZLDD5.js?v=ebcf444d:81
_getClient @ tsMode-P2VZLDD5.js?v=ebcf444d:82
getLanguageServiceWorker @ tsMode-P2VZLDD5.js?v=ebcf444d:87
worker @ tsMode-P2VZLDD5.js?v=ebcf444d:1117
_doValidate @ tsMode-P2VZLDD5.js?v=ebcf444d:368
maybeValidate @ tsMode-P2VZLDD5.js?v=ebcf444d:301
onModelAdd @ tsMode-P2VZLDD5.js?v=ebcf444d:326
(anonymous) @ tsMode-P2VZLDD5.js?v=ebcf444d:361
DiagnosticsAdapter @ tsMode-P2VZLDD5.js?v=ebcf444d:361
registerProviders @ tsMode-P2VZLDD5.js?v=ebcf444d:1211
setupMode @ tsMode-P2VZLDD5.js?v=ebcf444d:1214
setupJavaScript @ tsMode-P2VZLDD5.js?v=ebcf444d:1093
(anonymous) @ chunk-IUM3FXTN.js?v=ebcf444d:275
Promise.then (async)
(anonymous) @ chunk-IUM3FXTN.js?v=ebcf444d:275
(anonymous) @ chunk-YZ73PEPD.js?v=ebcf444d:118889
_deliver @ chunk-YZ73PEPD.js?v=ebcf444d:2407
_deliverQueue @ chunk-YZ73PEPD.js?v=ebcf444d:2416
fire @ chunk-YZ73PEPD.js?v=ebcf444d:2437
requestRichLanguageFeatures @ chunk-YZ73PEPD.js?v=ebcf444d:88158
TextModel2 @ chunk-YZ73PEPD.js?v=ebcf444d:29744
_createModelData @ chunk-YZ73PEPD.js?v=ebcf444d:96150
createModel @ chunk-YZ73PEPD.js?v=ebcf444d:96190
doCreateModel @ chunk-YZ73PEPD.js?v=ebcf444d:117432
createTextModel @ chunk-YZ73PEPD.js?v=ebcf444d:117429
StandaloneEditor2 @ chunk-YZ73PEPD.js?v=ebcf444d:117307
_createInstance @ chunk-YZ73PEPD.js?v=ebcf444d:110869
createInstance @ chunk-YZ73PEPD.js?v=ebcf444d:110844
create2 @ chunk-YZ73PEPD.js?v=ebcf444d:118094
(anonymous) @ Editor.vue:34
(anonymous) @ chunk-MYK6SCES.js?v=ebcf444d:3015
callWithErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1678
callWithAsyncErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1685
hook.__weh.hook.__weh @ chunk-MYK6SCES.js?v=ebcf444d:2995
flushPostFlushCbs @ chunk-MYK6SCES.js?v=ebcf444d:1861
flushJobs @ chunk-MYK6SCES.js?v=ebcf444d:1901
Promise.then (async)
queueFlush @ chunk-MYK6SCES.js?v=ebcf444d:1801
queueJob @ chunk-MYK6SCES.js?v=ebcf444d:1795
(anonymous) @ chunk-MYK6SCES.js?v=ebcf444d:6563
resetScheduling @ chunk-MYK6SCES.js?v=ebcf444d:516
instrumentations.<computed> @ chunk-MYK6SCES.js?v=ebcf444d:686
handleSelect @ App.vue:28
callWithErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1678
callWithAsyncErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1685
emit @ chunk-MYK6SCES.js?v=ebcf444d:7643
(anonymous) @ chunk-MYK6SCES.js?v=ebcf444d:9346
handleClick @ MenuTree.vue:55
callWithErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1678
callWithAsyncErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1685
emit @ chunk-MYK6SCES.js?v=ebcf444d:7643
(anonymous) @ chunk-MYK6SCES.js?v=ebcf444d:9346
onInternalClick @ ant-design-vue.js?v=b26240e2:35087
onInternalClick @ ant-design-vue.js?v=b26240e2:33092
callWithErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1678
callWithAsyncErrorHandling @ chunk-MYK6SCES.js?v=ebcf444d:1685
invoker @ chunk-MYK6SCES.js?v=ebcf444d:10331
Show 57 more frames
Show less
Editor.vue:70 An error occurred while formatting the document: Error: Unexpected usage
    at _EditorSimpleWorker.loadForeignModule (chunk-YZ73PEPD.js?v=ebcf444d:44614:27)
    at chunk-YZ73PEPD.js?v=ebcf444d:45108:22
    at async tsMode-P2VZLDD5.js?v=ebcf444d:81:16

Expected Behavior

ts worker can also be loaded normally on electron

Additional Context

  "devDependencies": {
    "@types/markdown-it": "^14.1.1",
    "@types/node": "^20.14.11",
    "@vitejs/plugin-vue": "^5.0.5",
    "electron": "^31.2.1",
    "electron-builder": "^24.13.3",
    "electron-devtools-installer": "^3.2.0",
    "rimraf": "^6.0.1",
    "typescript": "^5.2.2",
    "vite": "^5.3.4",
    "vite-plugin-electron": "^0.28.7",
    "vite-plugin-electron-renderer": "^0.14.5",
    "vue-tsc": "^2.0.26"
  }
duhbbx commented 1 month ago

image