Unable to use web workers using a JS entry point

[DarkGhostHunter]

Describe the bug

Using the backend integration for a web server (http://localhost:80), trying to use an external Web Worker (monaco-editor) returns 404 errors.

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
    plugins: [
        vue(),
    ],
    build: {
        polyfillModulePreload: false,
        manifest: true,
        rollupOptions: {
            input: 'resources/js/app.js',
        },
    },
});

<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>

Loading the developer server, with the web server already running on port 80:

npm run dev

VITE v3.0.4  ready in 1392 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose

Once done, the browser opens at http://localhost. The network tab shows it 404 for loading the web worker:

HTTP 1.0 GET http://localhost/node_modules/monaco-editor/esm/vs/editor/editor.worker.js?type=module&worker_file

404

If I try adding the worker manually by replacing return new EditorWorker() with:

return new Worker(
    "http://localhost:5173/node_modules/monaco-editor/esm/vs/editor/editor.worker.js?type=module&worker_file"
)

Chrome will report that the script in http://localhost:5173 cannot be accessed by http://localhost.

Reproduction

https://github.com/DarkGhostHunter/bug-vite-no-web-worker

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5 CPU 750  @ 2.67GHz
    Memory: 851.92 MB / 7.97 GB
  Binaries:
    Node: 17.2.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.15.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.77), ChromiumDev (105.0.1336.2)
  npmPackages:
    @vitejs/plugin-vue: ^3.0.0 => 3.0.1
    vite: ^3.0.0 => 3.0.4

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

related #13680

[sapphi-red]

Same workaround with #13680 would work: #13680 (comment)