[Bug] TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from app/monaco/vs/language/json/jsonWorker.js

[cintaccs]

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

No response

Monaco Editor Playground Code

Reproduction Steps

No response

Actual (Problematic) Behavior

editor.main.js:9 Uncaught Error: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from app/monaco/vs/language/json/jsonWorker.js

TypeError: Failed to parse URL from app/monaco/vs/language/json/jsonWorker.js at A.load (workerMain.js:6:13847) at n.load (workerMain.js:6:11936) at r (workerMain.js:8:9341) at f._loadModule (workerMain.js:8:9469) at f._resolve (workerMain.js:9:452) at f.defineModule (workerMain.js:8:5564) at f._relativeRequire (workerMain.js:8:6188) at a (workerMain.js:8:8519) at workerMain.js:29:82407 at new Promise () at A.load (workerMain.js:6:13847) at n.load (workerMain.js:6:11936) at r (workerMain.js:8:9341) at f._loadModule (workerMain.js:8:9469) at f._resolve (workerMain.js:9:452) at f.defineModule (workerMain.js:8:5564) at f._relativeRequire (workerMain.js:8:6188) at a (workerMain.js:8:8519) at workerMain.js:29:82407 at new Promise () at editor.main.js:9:12

Expected Behavior

No response

Additional Context

This is 52.2 using Chrome latest - using

import loader from '@monaco-editor/loader';

"@monaco-editor/loader": "^1.4.0",

[cintaccs]

the worker loads used to work in 0.50.0

[philipsens]

Did it fail to parse because the page gives a 404?

[cintaccs]

I dont see any 404 - however I saw something....

Seems to be related to CSSMODE and JSONMODE ... ??

when using it for SQL

there is no issue

[coader]

it's ok when use sql, but show this error when load htmlworker.js

[cintaccs]

it's ok when use sql, but show this error when load htmlworker.js

not sure I understand... What I see is that it fails with jsonmode and cssmode ... which I assume will try to load workers ... however when using "sql" mode - it is using the workermain and have no loading worker issues...

[serdarciplak]

I have the same issue.

It happens when a relative path is used for paths.vs as in this sample.

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

Using an absolute path fixes the issue.

require.config({ paths: { vs: 'http://localhost:5000/monaco-editor/min/vs' } });

Looks like relative paths are broken somewhere between 0.50.0 and 0.52.0. Can we get a fix for this soon, or should we use a workaround like manually adding document.baseURI as a prefix to the path?

[1aron]

It works for me:

loader.config({
    paths: {
        vs: window.location.origin + '/monaco-editor/vs'
    }
})

[cintaccs]

It works for me:

loader.config({ paths: { vs: window.location.origin + '/monaco-editor/vs' } })

Thanks for the tip!

I had to include the path as well - then it seems to work also for me! Seems less solid though ...

const pathParts = window.location.pathname.split('/').filter(part => part); 

loader.config({
    paths: {vs: window.location.origin + '/' + pathParts[0] + '/app/monaco/vs'}
});

[JMGomes]

I have the same issue, about being unable to load jsonWorker.js.

I'm using angular with this library: https://www.npmjs.com/package/ngx-monaco-editor-v2

Any advice?

[MitkoTschimev]

I have the same issue, about being unable to load jsonWorker.js.

I'm using angular with this library: https://www.npmjs.com/package/ngx-monaco-editor-v2

Any advice?

You can set it as baseUrl

export const monacoConfig: NgxMonacoEditorConfig = {
  baseUrl: window.location.origin + "/assets/monaco/min/vs",
  ...

And load it in angular with

importProvidersFrom(MonacoEditorModule.forRoot(monacoConfig))

[toiyabe]

I have this same issue, but from another file. I started having this problem after upgrading to 52.2.

Uncaught Error: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from /lib/monaco-editor/min/vs/language/html/htmlWorker.js

The patch suggested by @1aron worked for me:

loader.config({ paths: { vs: window.location.origin + '/monaco-editor/vs' } })

[Infern1]

I have the same issue, about being unable to load jsonWorker.js. I'm using angular with this library: https://www.npmjs.com/package/ngx-monaco-editor-v2 Any advice?

You can set it as baseUrl

export const monacoConfig: NgxMonacoEditorConfig = {
  baseUrl: window.location.origin + "/assets/monaco/min/vs",
  ...

And load it in angular with

importProvidersFrom(MonacoEditorModule.forRoot(monacoConfig))

Is the case for standalone components? According the description I should use: MonacoEditorModule.forRoot(monacoConfig) for NgModule?

[Flysky12138]

work in 0.51.0 error in 0.52.0

[arianox]

I'm running into the same issue. Has anyone found a way to combine the workaround with base href? Would appreciate any insights or solutions!

[szilardd]

I have the same issue, about being unable to load jsonWorker.js. I'm using angular with this library: https://www.npmjs.com/package/ngx-monaco-editor-v2 Any advice?

You can set it as baseUrl

export const monacoConfig: NgxMonacoEditorConfig = {
  baseUrl: window.location.origin + "/assets/monaco/min/vs",
  ...

And load it in angular with

importProvidersFrom(MonacoEditorModule.forRoot(monacoConfig))

thanks!

it also works like this in app.config.ts:

import { provideMonacoEditor } from 'ngx-monaco-editor-v2';

export const appConfig: ApplicationConfig = {
    providers: [
        provideMonacoEditor({ baseUrl: window.location.origin + '/assets/monaco/min/vs' }),
    ]
}

[aceArt-GmbH]

This seems fixed in 0.54 for me. Anyone else?