Basic sveltekit app with workers fails to finish build (hangs right after success message)

[marianmeres]

Describe the bug

Sveltekit app with workers fails to build. npm run dev works.

// $lib/worker/foo.ts
self.addEventListener('message', (message) => console.log(message.data));

// $lib/worker/foo-instance.ts
export const fooInstance = new Worker(new URL('./foo', import.meta.url));

// +page.svelte
<button on:click={async () => {
  const { fooInstance } = (await import("$lib/worker/foo-instance"));
  fooInstance.postMessage(Math.random());
}}>test worker</button>

The build starts running and shows the The emitted file "vite-manifest.json" overwrites a previously emitted file of the same name.. Continues and even shows success message ✓ built in XYms, but immediatelly hangs after it. The process will not quit.

Reproduction

https://github.com/marianmeres/_sveltekit-app-worker-bug https://stackblitz.com/edit/sveltejs-kit-template-default-wwv4gb

Logs

No response

System Info

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1
    Memory: 52.84 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.6.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.4.0 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 111.1.49.128
    Chrome: 111.0.5563.110
    Firefox: 111.0.1
    Safari: 16.3
  npmPackages:
    svelte: ^3.56.0 => 3.57.0

Severity

blocking an upgrade

Additional Information

No response

[mstachowiak]

I'm experiencing the same problem in a fresh repo.

Directly Imported Worker - Build Hangs

If you attempt to import a worker using the ?worker query suffix per the Vite docs, the npm run build commands hangs. It appears a "vite-manifest.json" is created for the worker and overrides the "vite-manifest.json" file created for the application, as noted by the build output rendering chunks (10)...The emitted file "vite-manifest.json" overwrites a previously emitted file of the same name.

import MyWorker from './worker?worker'
const worker = new MyWorker()

Retrieve Worker as URL - Inlined w/ Wrong MIME Type

Alternatively, if you attempt to import a worker using the ?url query suffix, the build completes but is broken. If you run npm run preview you'll see the worker is inlined as Base64, but the MIME type is wrong and set to data:video/mp2t (because .ts is a valid video file extension too). This is mentioned in Issue 11823

import workerUrl from './worker?url';
const worker = new Worker(workerUrl, { type: 'module' });

So no matter which approach you take, there's no way to create an operational build with a Web Worker using SvelteKit currently. This use to be operational.

[terkelg]

Can confirm this is also happening to our project. I'm unsure when this started happening. It only started for me after deleting node_modules + lock-files and re-installing.

Could be related to this: https://github.com/vitejs/vite/issues/10057

Edit: It also happens with static imports unfortunately

[GavinSiver]

I'm experiencing the same problem in a fresh repo.

Directly Imported Worker - Build Hangs

If you attempt to import a worker using the ?worker query suffix per the Vite docs, the npm run build commands hangs. It appears a "vite-manifest.json" is created for the worker and overrides the "vite-manifest.json" file created for the application, as noted by the build output rendering chunks (10)...The emitted file "vite-manifest.json" overwrites a previously emitted file of the same name.

import MyWorker from './worker?worker'
const worker = new MyWorker()

Retrieve Worker as URL - Inlined w/ Wrong MIME Type

Alternatively, if you attempt to import a worker using the ?url query suffix, the build completes but is broken. If you run npm run preview you'll see the worker is inlined as Base64, but the MIME type is wrong and set to data:video/mp2t (because .ts is a valid video file extension too). This is mentioned in Issue 11823

import workerUrl from './worker?url';
const worker = new Worker(workerUrl, { type: 'module' });

So no matter which approach you take, there's no way to create an operational build with a Web Worker using SvelteKit currently. This use to be operational.

I am having almost the exact same problem. The only difference is my build command fails entirely rather than hanging. I get the same rendering chunks (25)...The emitted file "vite-manifest.json" overwrites a previously emitted file of the same name. output and the mime type issue with the data:video/mp2t mime type for base64 encoding.

Currently trying like hell to find a workaround. I have the same issue as the original with

Sveltekit app with workers fails to build. npm run dev works.

[terkelg]

@GavinSiver in version 1.15.0 the build no longer hangs but throws an error.

[mstachowiak]

@GavinSiver in version 1.15.0 the build no longer hangs but throws an error.

The error is occurring because the vite-manifest.json for the application is being overwritten by a new vite-manifest.json that is specific to the worker. The build process attempts to look up an application file in the vite-manifest.json but the manifest only contains data for the worker, it no longer contains data for the application.

SvelteKit 1.15.0 Reproduction: https://stackblitz.com/edit/sveltejs-kit-template-default-zzblkv?file=src/routes/+page.svelte

I'm unaware of any workarounds or ways to fix the issue. Web Workers with SvelteKit are currently broken and unusable.

[mstachowiak]

This appears to be a Vite issue, highlighted in the two issues below...

Vite Issue 10190 Vite Issue 12627

I haven't verified, but there appears to be a fix on the way: https://github.com/vitejs/vite/pull/12661

[dummdidumm]

In the meantime, adding this to the vite.config.js might help as a temporary workaround:

const config = {
        // ...
        // TODO: Remove once vite 4.3 is out
    worker: {
        plugins: [
            {
                name: 'remove-manifest',
                configResolved(c) {
                    const manifestPlugin = c.worker.plugins.findIndex((p) => p.name === 'vite:manifest');
                    c.worker.plugins.splice(manifestPlugin, 1);
                    const ssrManifestPlugin = c.worker.plugins.findIndex(
                        (p) => p.name === 'vite:ssr-manifest'
                    );
                    c.plugins.splice(ssrManifestPlugin, 1);
                }
            }
        ]
    }
};
// ..

[jsilveira]

In the meantime, adding this to the vite.config.js might help as a temporary workaround:

I can confirm the workaround works in my project with the same problem. Thanks @dummdidumm

[regnaio]

Thank you, dummdidumm!

[bluwy]

Vite 4.3-beta.2 has also been released with the fix above. There's also a ton of performance improvements in the release so would be good to bump as soon as possible too.

[BlueFrog130]

Upgrading to vite 4.3.1 fixed the issue for me

[bluwy]

Closing as fixed as it's a Vite issue.