getWorker function doesn't work

[Egor Dubchenko (dubchenko)]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Code

No response

Actual Behavior

When I import Monaco from .../editor.api.js getWorker function doesn't call. But if import Monaco from monaco-editor everything works OK. I'm using Vite. How to fix this?

Expected Behavior

No response

Additional Context

Example:

import 'monaco-editor/esm/vs/editor/browser/coreCommands.js'
import 'monaco-editor/esm/vs/editor/contrib/bracketMatching/browser/bracketMatching.js'
import 'monaco-editor/esm/vs/editor/contrib/comment/browser/comment.js'
import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js'
import 'monaco-editor/esm/vs/editor/contrib/hover/browser/hover.js'
import 'monaco-editor/esm/vs/editor/contrib/linesOperations/browser/linesOperations.js'
import 'monaco-editor/esm/vs/editor/contrib/smartSelect/browser/smartSelect.js'
import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js'
import 'monaco-editor/esm/vs/editor/contrib/wordHighlighter/browser/wordHighlighter.js'
import 'monaco-editor/esm/vs/editor/contrib/wordOperations/browser/wordOperations.js'

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
import CSSWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import HTMLWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import JSONWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import TSWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'

self.MonacoEnvironment = {
  getWorker (id, label) {
    console.log('label', label) // nothing happening

    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()
  }
}

export { monaco }

[Srabutdotcom]

What is the use of self.MonacoEnvironment? Is it required under or not?

[Laffery (Laffery)]

Any progress on this question?

[Chris Berry (anotherchrisberry)]

I ran into this when we switch from:

import * as monaco from "monaco-editor";

to

import * as monaco from "monaco-editor/esm/vs/editor/editor.api";

Adding some more imports fixed it:

// for JSON
import "monaco-editor/esm/vs/language/json/monaco.contribution";
// for HTML
import "monaco-editor/esm/vs/basic-languages/html/html.contribution";

We don't use other language bundles but there are similar files in the language and basic-languages directories, so guessing CSS/Typescript/Javascript will be one of them.

I did find html in both directories, but basic-languages was the one I needed 🤷