microsoft / microsoft/monaco-editor

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

Open
#4,618 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Reproducible in vscode.dev or in VS Code Desktop?
  • Not reproducible in vscode.dev or 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"
  }

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the worker imports and MonacoEnvironment.getWorker in the supplied TypeScript snippet, then reproduce the failure from Editor.vue:34 in the Vite 5 and Electron setup. Done means the TypeScript worker loads without the web-worker fallback or the require2 error.

Written by the indexing model from the issue text.

Assessment

Tech stack
electron, javascript, typescript, vite
Domain
desktop, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.