[Bug] Cannot read properties of undefined (reading 'toUrl')

[13751139402]

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 Link

why

Monaco Editor Playground Code

No response

Reproduction Steps

No response

Actual (Problematic) Behavior

No response

Expected Behavior

No response

Additional Context

No response

[taokepppooo]

https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md

[jefferyE]

https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md

I used Vite, but it doesn't work.

[dribble-njr]

Same issue in rspack.

self.MonacoEnvironment = {
  getWorker: function (moduleId, label) {
    if (label === 'json') {
      return new Worker(
        new URL(
          'monaco-editor/esm/vs/language/json/json.worker',
          import.meta.url
        )
      );
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new Worker(
        new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url)
      );
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new Worker(
        new URL(
          'monaco-editor/esm/vs/language/html/html.worker',
          import.meta.url
        )
      );
    }
    if (label === 'typescript' || label === 'javascript') {
      return new Worker(
        new URL(
          'monaco-editor/esm/vs/language/typescript/ts.worker',
          import.meta.url
        )
      );
    }
    return new Worker(
      new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url)
    );
  },
};

[dribble-njr]

I tried downgrading to 0.50.0 and it solved.

[cemremengu]

Using vite, could not get it to work. Any solutions so far?

[francois-frvr]

For me it worked after I packed the code (self.MonacoEnvironment = {...) into its own file and imported it before the monaco-editor

import "./monacoWorker";
import * as monaco from 'monaco-editor';

const editor = monaco.editor.create(/* ... */);

[adarter-tc]

self.MonacoEnvironment.getWorkerUrl is not a function
Uncaught Error: Cannot read properties of undefined (reading 'toUrl')

[adarter-tc]

self.MonacoEnvironment.getWorkerUrl is not a function
Uncaught Error: Cannot read properties of undefined (reading 'toUrl')

importing separately solves the errors for me.

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
import 'monaco-editor/esm/vs/basic-languages/html/html.contribution';
import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
import 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution';
import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution';
import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution';
import 'monaco-editor/esm/vs/language/json/monaco.contribution.js';

[cemremengu]

I ended up using this for vite from the https://www.npmjs.com/package/@monaco-editor/react readme

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(/* ... */);

[licc12]

I tried downgrading to 0.50.0 and it solved.

tks, but I get a new error tips:

[qiushuangHu]

`
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();
},
};

const editor = monaco.editor.create(/* ... */);
`

[zhy2014]

我尝试降级到 0.50.0 并且解决了问题。

谢谢，但是我收到一个新的错误提示：

解决了吗

[whale2002]

I tried using version 0.50.0 and finally solved the problem.

First, 0.52.0 -> 0.50.0

Second, import worker file from cdn like unpkg

export const ensureMonacoEnvironment = () => {
  self.MonacoEnvironment = {
    getWorkerUrl: () =>
      `data:text/javascript;charset=utf-8,${encodeURIComponent(`
        self.MonacoEnvironment = {
          baseUrl: 'https://unpkg.com/[email protected]/min/'
        };
        importScripts('https://unpkg.com/[email protected]/min/vs/base/worker/workerMain.js');`)}`,
  };
};

Import this function in the file using the monaco editor and execute it. Now I have no error

[whale2002]

我尝试降级到 0.50.0 并且解决了问题。

谢谢，但是我收到一个新的错误提示：

解决了吗

解决了看我下面的评论