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

[13751139402]

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?

• [ ] 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.

[zeevenn]

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

[zeevenn]

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 并且解决了问题。

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

解决了吗

解决了看我下面的评论

[NobitaYuan]

I tried using version 0.50.0 and finally solved the problem.我尝试使用 0.50.0 版本，终于解决了这个问题。

First, 0.52.0 -> 0.50.0一、 0.52.0 -> 0.50.0

Second, import worker file from cdn like unpkg其次，从 cdn 导入 worker 文件，如 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使用 monaco 编辑器将此函数导入文件中并执行它。现在我没有错误

感谢兄弟，这段好使 👍👍👍

[nobitaali]

@adarter-tc its not work https://github.com/microsoft/monaco-editor/issues/4739#issuecomment-2509186892

this error: hook.js:608 Error: Unexpected usage at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:463:1) at webWorker.js:38:1

ERROR Cannot read properties of undefined (reading 'toUrl')

TypeError: Cannot read properties of undefined (reading 'toUrl')

its work!! but you can copy the file monac-editor from node modul to public dir

mport Editor, { loader } from '@monaco-editor/react';

loader.config({ paths: { vs: 'monaco-editor/min/vs' } });

[yasz]

if there is any new solution?

[FATEC420]

when I use "import * as monaco from 'monaco-editor'", there are some error in DevTools

but when I use "import * as monaco from 'monaco-editor/esm/vs/editor/editor.api", there are no error

[YanceyOfficial]

when I use "import * as monaco from 'monaco-editor'", there are some error in DevTools

but when I use "import * as monaco from 'monaco-editor/esm/vs/editor/editor.api", there are no error

Your solution suppresses the error, but loses highlighting theme in my environment.

• "@monaco-editor/react": "^4.7.0",
• "monaco-editor": "^0.52.2",

The following code works perfectly, by the way, I'm using Vite:

import Editor, { loader } from '@monaco-editor/react'
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.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 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(_, 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 })

export function JsonEditor() {
  return (
    <Editor
      height="90vh"
      defaultLanguage="json"
      defaultValue=""
    />
  )
}

[LandoNowinss]

I tried using version 0.50.0 and finally solved the problem.我尝试使用 0.50.0 版本，终于解决了这个问题。 First, 0.52.0 -> 0.50.0一、 0.52.0 -> 0.50.0 Second, import worker file from cdn like unpkg其次，从 cdn 导入 worker 文件，如 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');)};%60)%7D%60), }; }; Import this function in the file using the monaco editor and execute it. Now I have no error使用 monaco 编辑器将此函数导入文件中并执行它。现在我没有错误

感谢兄弟，这段好使 👍👍👍

啥玩意乱七八糟的，全是语法错误

[h4chi]

No errors, working implementation w/ [email protected], [email protected]

<script lang="ts">
import { browser } from "$app/environment";
import EditorWorker from "monaco-editor/esm/vs/editor/editor.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 JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
import TsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";

let { initialValue = "", language = "typescript", updateContent } = $props<{
  initialValue?: string;
  language?: string;
  updateContent?: (newContent: string) => void;
}>();

let ready = $state(false);
let element = $state<HTMLDivElement | null>(null);
let editorInstance = $state<any>(null);

$effect(() => {
  if (!browser || !element) return;

  // Setup complete worker environment
  self.MonacoEnvironment = {
    getWorker: function(moduleId, 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 setupEditor = async () => {
    if (!element || editorInstance) return;
    try {
      const monaco = await import("monaco-editor");

      editorInstance = monaco.editor.create(element, {
        value: initialValue,
        language,
        automaticLayout: true,
        minimap: { enabled: true },
        scrollBeyondLastLine: false,
        theme: "vs-dark",
      });

      if (editorInstance) {
        editorInstance.onDidChangeModelContent(() => {
          const value = editorInstance.getValue();
          if (updateContent) {
            updateContent(value);
          } else {
            console.log("Content changed:", value);
          }
        });

        ready = true;
      }
    } catch (error) {
      console.error("Monaco initialization error:", error);
    }
  };

  setupEditor();

  // Cleanup function for proper disposal
  return () => {
    if (editorInstance) {
      editorInstance.dispose();
      editorInstance = null;
    }
  };
});
</script>

{#if !ready}
  <p>Loading...</p>
{/if}

<div bind:this={element} class="h-full w-full"></div>

<style>
div {
  min-height: 300px;
  width: 100%;
}
</style>