Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
1 of 2 tasks
duhbbx opened this issue Jul 27, 2024 · 1 comment
Open
1 of 2 tasks

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

duhbbx opened this issue Jul 27, 2024 · 1 comment

Comments

@duhbbx
Copy link

duhbbx commented Jul 27, 2024

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"
  }
@duhbbx
Copy link
Author

duhbbx commented Jul 27, 2024

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@duhbbx