monaco-editor [Bug] Instructions for integrating with Vite don't work

Reproducible in vscode.dev or in VS Code Desktop?

[X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

[x] Not reproducible in the monaco editor playground

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

No response

Reproduction Steps

Copy-paste the code from here: https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite

Actual (Problematic) Behavior

These warnings appear in the browser console:

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
self.MonacoEnvironment.getWorkerUrl is not a function

Expected Behavior

Code should work.

Additional Context

The warnings make perfect sense to me - the code snippet from the instructions doc doesn't define getWorkerUrl, so how is this expected to work?

Using monaco-editor version 0.28.1. Also tried version 0.36.1 with the same result.

Jun 28 '23 23:06 kaiyoma

Update here: I took another look at the code in the instructions and realized it was using the "query parameter" approach to loading workers, which we don't actually use in our codebase. Once I switched the code to use the new URL approach instead, everything started working! Maybe this will help others too.

This is the final version that went into our UI:

self.MonacoEnvironment = {
  getWorker(_workerId: string, label: string): Worker {
    switch (label) {
      case 'json': {
        return new Worker(
          new URL(
            '../node_modules/monaco-editor/esm/vs/language/json/json.worker.js',
            import.meta.url,
          ),
          { type: 'module' },
        );
      }

      default: {
        return new Worker(
          new URL('../node_modules/monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url),
          { type: 'module' },
        );
      }
    }
  },
};

If you want support for the other workers, just add more case statements.

Jul 07 '23 00:07 kaiyoma

Thanks for reporting this! Can you create a PR to update the docs?

Jul 07 '23 16:07 hediet

It's not work in 0.41.0, but it's fine in 0.40.0.

Aug 29 '23 07:08 rick-chou

package.json

{
  "devDependencies": {
    "vite": "^4.4.5"
  },
  "dependencies": {
    "monaco-editor": "^0.43.0"
  }
}

code

import * as monaco from 'monaco-editor';
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 jsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';

const app = document.getElementById("app");
self.MonacoEnvironment = {
    getWorker: function (workerId, label) {
        switch (label) {
            case 'json':
                return jsonWorker();
            case 'css':
            case 'scss':
            case 'less':
                return cssWorker();
            case 'html':
            case 'handlebars':
            case 'razor':
                return htmlWorker();
            case 'typescript':
            case 'javascript':
                return jsWorker();
            default:
                return editorWorker();
        }
    }
};
monaco.editor.create(app, {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: 'javascript'
});