[0.x] Web Workers return 404

[DarkGhostHunter]

• Laravel Vite Plugin Version: 0.5.2
• Laravel Version: 9.22.1
• Node Version: 17.2.0
• NPM Version: 8.15.1
• Host operating system: Windows 10 / Ubuntu 22.04
• Web Browser & Version: Chrome 105.0.5195.10
• Running in Sail / Docker: No

Description:

Using monaco-editor, which requires Web Workers to be registered to enable functionality, using it as instructed, the Web Workers are requested with invalid URLs.

Note that the workers URL is generated incorrectly by Vite by appending / to the worker URL:

Details in this Stack Overflow question.

Steps To Reproduce:

npm install monaco-editor

<script setup>
import {onMounted, onUnmounted, ref, defineEmits} from "vue"
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) {
        switch (label) {
            case 'json':
                return new jsonWorker();
            case 'css':
            case 'scss':
            case 'less':
                return new cssWorker();
            case 'html':
            case 'handlebars':
            case 'razor':
                return new htmlWorker();
            case 'typescript':
            case 'javascript':
                return new tsWorker();
            case 'yaml':
                return new yamlWorker();
            default:
                return new editorWorker()
        }
    }
};

monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);

const props = defineProps({
    modelValue: {
        type: String,
        default: '{"foo":"bar"}'
    },
});

const emit = defineEmits(['update:modelValue']);

const container = ref()

let instance = null

onMounted(() => {
    instance = monaco.editor.create(container.value, {
        model: monaco.editor.createModel(props.modelValue, 'json'),
        tabSize: 2,
    })

    instance.onDidChangeModelContent(() => {
        emit('update:modelValue', instance.getValue());
    });
})

onUnmounted(() => {
    instance?.dispose()
})
</script>

<template>
    <div ref="container"></div>
</template>

[jessarcher]

Hi @DarkGhostHunter, this looks like the same issue as #106.

I believe this is an upstream issue with Vite, but I'd be curious to know whether the problem exists without this plugin, by manually configuring Vite following https://vitejs.dev/guide/backend-integration.html

[DarkGhostHunter]

It's somewhat the same. My goal was to include monaco-yaml as I need a YAML Editor plus Schema verification.

I'll try the manual backend config.

[driesvints]

Please see the other issue, thanks.

[DarkGhostHunter]

Hi @DarkGhostHunter, this looks like the same issue as #106.

I believe this is an upstream issue with Vite, but I'd be curious to know whether the problem exists without this plugin, by manually configuring Vite following https://vitejs.dev/guide/backend-integration.html

I was able to replicate the problem, and it seems that when using a backend instead of using Vite as a proxy won't allow web workers because what you said earlier: the browser doesn't allow web worker to run from different ports, even in the same domain.

In other words, to this to successfully work, the only workaround is to access the server through Vite:

[Vite Proxy] -> [PHP Web Server]

I elevated this to Vite.

[P-u-r-i-a]

There is a workaround for this issue: vitejs/vite#13680 (comment)