How to resolve CORs issue in webpack

[dhrubomoy]

I have followed the instructions in this doc, to resolve the issue with worker in webpack. But I am getting this error

monaco-editor.tsx:217 Uncaught (in promise) SecurityError: Failed to construct 'Worker': 
Script at 'https://localhost:8093/424f6725c1d67c553d1e.js' cannot be accessed from origin
'https://us.mysite.com'.

I am running it in a single page application. I was wondering if this is a known issue and there is any preferred way to solve it?

Thanks in advance.

[dhrubomoy]

I was able to solve the "cannot be accessed from origin" error, by using blob (I don't know if its the right way to do it). But textmate worker is throwing an error "document is not defined"

Here is how I am setting the workers:

const createWorker = async (workerUrl: string, workerName: string) => {
    // const workerUrl = new URL(file, import.meta.url).href;
    const response = await fetch(workerUrl);

    if (!response.ok) {
        throw new Error(`Failed to fetch worker: ${response.statusText}`);
    }

    const workerCode = await response.text();
    const blob = new Blob([workerCode], { type: 'application/javascript' });
    const blobUrl = URL.createObjectURL(blob);

    const worker = new Worker(blobUrl, {
        type: 'module',
        name: workerName,
    });

    return worker;
};

export const defineDefaultWorkerLoaders: () => Record<string, WorkerLoader> = () => {
    const defaultTextEditorWorker = () => createWorker(
        new URL('../../../examples/src/assets/monaco-workers/editor.js', import.meta.url).href,
        'TextEditorWorker'
    );
    const defaultTextMateWorker = () => createWorker(
        new URL('../../../examples/src/assets/monaco-workers/textmate.js', import.meta.url).href,
        'TextMateWorker'
    );

    return {
        // if you import monaco api as 'monaco-editor': monaco-editor/esm/vs/editor/editor.worker.js
        TextEditorWorker: defaultTextEditorWorker,
        TextMateWorker: defaultTextMateWorker,
        // these are other possible workers not configured by default
        OutputLinkDetectionWorker: undefined,
        LanguageDetectionWorker: undefined,
        NotebookEditorWorker: undefined,
        LocalFileSearchWorker: undefined
    };
};

export const configureDefaultWorkerFactory = (logger?: Logger) => {
    useWorkerFactory({
        workerLoaders: defineDefaultWorkerLoaders(),
        logger
    });
};

[CGNonofr]

My guess is that it's not loading the actual worker but some random default javascript. Workers can't use document obviously

[kaisalmen]

@dhrubomoy btw, did you compare your webpack config with our verification example? I don't see this problem there. But I see that the Textmate highlighting is only working after I interacted with the editor.

[dhrubomoy]

@CGNonofr @kaisalmen Thanks guys for the replies.
I am using the worker file mentioned in this doc, which seems to be correct one.

editor: './node_modules/@codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker.js',
textmate: './node_modules/@codingame/monaco-vscode-textmate-service-override/worker.js'

You can take a look at the file that gets generated by webpack here. Below is the line where the error occurs. I have no idea where that line is coming from

var scripts = document.getElementsByTagName("script");

[dhrubomoy]

If I change the textmate entry file to following I don't see the error, though I still see thedocument.getElementsByTagName("script") line in the webpacked file

textmate: '../../node_modules/@codingame/monaco-vscode-textmate-service-override/vscode/src/vs/workbench/services/textMate/browser/backgroundTokenization/worker/textMateTokenizationWorker.worker.js'