You must define a function MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker

[Cannonb4ll]

Using the code from the README.md example gives this warning in console.

Whats the easiest way to solve this? I can't seem to find anything about this in the docs here.

Full error:

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

[nozbwang]

Using the code from the README.md example gives this warning in console.

Whats the easiest way to solve this? I can't seem to find anything about this in the docs here.

Full error:

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

I run into the same problem. Did you find a workaround?

[nozbwang]

I fixed this problem.

1. add getWorkerUrl to vue
import * as monaco from "monaco-editor"

// Since packaging is done by you, you need
// to instruct the editor how you named the
// bundles that contain the web workers.
self.MonacoEnvironment = {
getWorkerUrl: function(moduleId, label) {
if (label === "json") {
return "./json.worker.bundle.js"
}
if (label === "css") {
return "./css.worker.bundle.js"
}
if (label === "html") {
return "./html.worker.bundle.js"
}
if (label === "typescript" || label === "javascript") {
return "./ts.worker.bundle.js"
}
return "./editor.worker.bundle.js"
},
}

monaco.editor.create(document.getElementById("container"), {
value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join("\n"),
language: "javascript",
})

2. Separately, you need to configure your webpack build. This is just one of many ways in which you can do this.
// webpack.config.js
const path = require("path")

module.exports = {
entry: {
app: "./index.js",
// Package each language's worker and give these filenames in getWorkerUrl
"editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js",
"json.worker": "monaco-editor/esm/vs/language/json/json.worker",
"css.worker": "monaco-editor/esm/vs/language/css/css.worker",
"html.worker": "monaco-editor/esm/vs/language/html/html.worker",
"ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker",
},
output: {
globalObject: "self",
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /.css$/,
use: ["style-loader", "css-loader"],
},
],
},
}