Could not create worker when using monaco from `monaco-editor/esm/vs/editor/editor.api`

[kingyue737]

Description

monaco-editor version: 0.53.0

Warning in console:

Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. 
Cannot use 'in' operator to search for 'then' in undefined

All the funcitionalities do not work.

• No such issue with monaco-editor v0.52.2

• No such issue if using the full monaco instead of monaco-editor/esm/vs/editor/editor.api with monaco-editor v0.53.0

Reproduction

https://stackblitz.com/edit/vitejs-vite-j2rtv3gq

[haines]

I'm running into the same issue. It seems to have been caused by microsoft/vscode#244117, specifically this change:

-		const workerDescriptor: IWorkerDescriptor = {
-			moduleId: standaloneEditorWorkerDescriptor.moduleId,
-			esmModuleLocation: standaloneEditorWorkerDescriptor.esmModuleLocation,
-			label: opts.label,
-		};
-		super(workerDescriptor, opts.keepIdleModels || false, modelService);
+ 		super(opts.worker, opts.keepIdleModels || false, modelService);

This change means that calling monaco.editor.createWebWorker without providing a worker option is an error, as reflected in the corresponding change to the types.

The reason it works after importing monaco rather than monaco-editor/esm/vs/editor/editor.api.js is that there's now a wrapper function that translates the old options to a worker (introduced here).

Unfortunately they bundle that function into monaco-editor/esm/vs/editor/editor.main.js so it's not possible to import it without importing everything else 🙁

Full details

The "Could not create web worker(s)." warning is triggered from this getWorker call here

      const worker = await workerManager.getWorker(model.uri)

getWorker calls createWebWorker here

      worker ||= monaco.editor.createWebWorker<PromisifiedWorker<T>>({
        createData,
        label,
        moduleId
      })

That filters through a couple of wrapper functions here

export function createWebWorker<T extends object>(opts: IInternalWebWorkerOptions): MonacoWebWorker<T> {
	return actualCreateWebWorker<T>(StandaloneServices.get(IModelService), opts);
}

and here

export function createWebWorker<T extends object>(modelService: IModelService, opts: IInternalWebWorkerOptions): MonacoWebWorker<T> {
	return new MonacoWebWorkerImpl<T>(modelService, opts);
}

before arriving at the MonacoWebWorkerImpl constructor here

	constructor(modelService: IModelService, opts: IInternalWebWorkerOptions) {
		super(opts.worker, opts.keepIdleModels || false, modelService);

Notice how the super call is referencing opts.worker which is undefined, because it was not provided in the original monaco.editor.createWebWorker call.

The parent class's constructor therefore sets _workerDescriptorOrWorker to undefined here

	constructor(
		private readonly _workerDescriptorOrWorker: IWebWorkerDescriptor | Worker | Promise<Worker>,

This subsequently results in a call with undefined to a different createWebWorker function here

				this._worker = this._register(createWebWorker<EditorWorker>(this._workerDescriptorOrWorker));

which constructs a WebWorker with undefined here

export function createWebWorker<T extends object>(arg0: URI | IWebWorkerDescriptor | Worker | Promise<Worker>, arg1?: string | undefined): IWebWorkerClient<T> {
	const workerDescriptorOrWorker = (URI.isUri(arg0) ? new WebWorkerDescriptor(arg0, arg1) : arg0);
	return new WebWorkerClient<T>(new WebWorker(workerDescriptorOrWorker));
}

This then throws the "Cannot use 'in' operator to search for 'then' in undefined" error which causes the warning here

		const workerOrPromise = (
			descriptorOrWorker instanceof Worker
				? descriptorOrWorker :
				'then' in descriptorOrWorker ? descriptorOrWorker
					: getWorker(descriptorOrWorker, this.id)
		);

[valerii15298]

Solution:

import "monaco-editor/esm/vs/editor/edcore.main.js";
import "monaco-editor/esm/vs/language/json/monaco.contribution.js";
import "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js";

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

const { createWebWorker } = monaco.editor;
monaco.editor.createWebWorker = (opts) => {
  if ("worker" in opts) {
    return createWebWorker(opts);
  }

  const _worker = globalThis.MonacoEnvironment?.getWorker?.(
    opts.moduleId,
    opts.label ?? "monaco-editor-worker",
  );
  if (!_worker) {
    return createWebWorker(opts);
  }

  const worker = Promise.resolve(_worker).then((w) => {
    w.postMessage("ignore");
    w.postMessage(opts.createData);
    return w;
  });

  return createWebWorker({ ...opts, worker });
};

export { monaco };

Now just import languages you need in the top like:

import "monaco-editor/esm/vs/basic-languages/kotlin/kotlin.contribution.js";

And use that exported monaco instance.

If you do not need command pallet and some other fancy stuff you can replace:

import "monaco-editor/esm/vs/editor/edcore.main.js";

with

import "monaco-editor/esm/vs/editor/editor.all.js";

which will give you just stickyScroll, suggest, rename and similar functionalities.

Note for library authors:
If you use "sideEffects": false field in package.json then you need to specify it like this:
"sideEffects": [""./src/monaco.*""] otherwise tools like vite will not bundle side effect imports

[sgerke-1L]

This seems to be working with monaco 0.55.1:

import "monaco-editor/esm/vs/editor/editor.all.js";
import "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js";
import * as monaco from "monaco-editor/esm/vs/editor/editor.main.js";
import YamlWorker from "../helpers/yaml.worker.js?worker";
import { MonacoYaml, configureMonacoYaml } from "monaco-yaml";

window.MonacoEnvironment = {
  getWorker() {
    return new YamlWorker();
  },
};
// Work arround https://github.com/remcohaszing/monaco-yaml/issues/272.
const { createWebWorker: oldCreateWebWorker } = monaco.editor;
monaco.editor.createWebWorker = (opts: monaco.IWebWorkerOptions | monaco.editor.IInternalWebWorkerOptions) => {
  if ("worker" in opts) {
    return oldCreateWebWorker(opts);
  }

  return monaco.createWebWorker(opts);
};

[jacobzim-stl]

For anyone trying to patch their upstream dependency, this worked for me with monaco-editor 0.55.1, monaco-worker-manager 2.0.1, and monaco-yaml 5.4.1

Note: This patch is applied to https://github.com/remcohaszing/monaco-worker-manager, not monaco-yaml itself.

# monaco-worker-manager.patch
diff --git a/index.js b/index.js
index 6527afac750ef88957e5d7b02b9cb04c4000df5d..efc8cf9c141f943051ffeb241e6edb6873c4d036 100644
--- a/index.js
+++ b/index.js
@@ -40,7 +40,7 @@ export function createWorkerManager(monaco, options) {
             }
             lastUsedTime = Date.now();
             if (!worker) {
-                worker = monaco.editor.createWebWorker({
+                worker = monaco.createWebWorker({
                     createData,
                     label,
                     moduleId,