Use monaco-editor as a local package, but a worker-related error occurs

[Sky-FE]

Describe the bug I refer to the usage method in the documentation and use monaco-editor as a local package. The following is the sample code:

import * as monaco from 'monaco-editor';
import MonacoEditor, {  loader } from '@monaco-editor/react';

loader.config({
  monaco,
});

But after using it in my project, it produces the following error:

Uncaught (in promise) Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:460:1)
    at webWorker.js:38:1

Screenshots

Desktop

• OS: [macOS]
• Browser [Chrome]
• Version [105.0.5195.102]

Additional context

• @monaco-editor/[email protected]
• [email protected]
• Created by CRA eject mode

Is there any good way to solve the above problem?

[suren-atoyan]

With CRA you need to use an additional webpack-plugin.

With Vite, you can do the following:

import { loader } from "@monaco-editor/react";

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"

self.MonacoEnvironment = {
  getWorker(_, label) {
    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") {
      return new tsWorker()
    }
    return new editorWorker()
  }
}

loader.config({ monaco });

loader.init().then(/* ... */);

[Sky-FE]

@suren-atoyan Yes, i have used monaco-editor-webpack-plugin, but still getting the same error.

[austzyl]

I had the same error in my react project.

"@monaco-editor/react": "^4.4.6", "react": "^16.8.6",

import * as monaco from "monaco-editor"; import Editor, { loader } from "@monaco-editor/react"; loader.config({ monaco });

[Business99]

Same error here. Works perfectly, however it just spams my console with these errors.

import * as monaco from "monaco-editor"
import Editor, {loader} from "@monaco-editor/react";

loader.config({monaco});

function App() {
  return (
    <div className="App">
      <Editor height={"90vh"} defaultLanguage={"javascript"} defaultValue={"const bubble = () => {console.log('yeet')}"}/>
    </div>
  );
}

export default App;

[jakajancar]

@suren-atoyan Is it supposed to work with plain esbuild? (no Vite)

[suren-atoyan]

@jakajancar I've never tested it with plain esbuild, do you get errors with esbuild?

[jakajancar]

The ?worker syntax is something added by Vite, it’s not in stock esbuild, so I’m not sure how to set this up nicely.

[jakajancar]

And happy New Year! :)

[RobertCLian]

@Business99 have u found way to fix the error? I got the same issues

[vladtimss]

Hi all, have the same error. Did you solved it? @suren-atoyan could you help us please i also use monaco-editor-webpack-plugin but it's unsuccessfully

[NoManPlay]

I resolved this error in esbuild

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

[hljwwyy123]

using
"@monaco-editor/react": "^4.5.1"
"monaco-editor": "^0.40.0"

this conf work!

import * as monaco from "monaco-editor"
import jsonworker from "monaco-editor/esm/vs/language/json/json.worker.js"
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker.js"
import Editor, { loader } from "@monaco-editor/react/";

...

(window as any).MonacoEnvironment = {
  getWorkerUrl: (workerId: string, label: string) => {
    if (label === 'json') {
      return new jsonworker()
    }
    return new editorWorker()
    }
  };
  
loader.config({ monaco });

<Editor
  language={'json'}
/>

[GuanJdoJ]

same +1