Table of Contents

Snippet: odd Web Worker bug

The other day I ran into the weirdest of bugs. I wanted to take my WASM code out of the the main app code, so I wrote what the Vite docs recommended:

const worker = new Worker(new URL('@/worker/index.ts', import.meta.url), { type: 'module' });

Not being pleased with that form, I decided to break it up into two lines:

const workerURL = new URL('@/worker/index.ts', import.meta.url);
const worker = new Worker(workerURL, { type: 'module' });

I fire up my Vite dev server and… it works.

Time goes on and I forget about it. Then, when it comes time to deploy, I run my Vite build step and get hit by a strange message:

Failed to load module script: The server responded with a non-JavaScript MIME type of “video/mp2t”. Strict MIME type checking is enforced for module scripts per HTML spec.

What?

I go back to my dev server and… it loads just fine. What is happening?

After poking around for a bit, on a hunch I decide to go back to the initial incantation:

const worker = new Worker(new URL('@/worker/index.ts', import.meta.url), { type: 'module' });

Lo and behold, it works! Turns out, I’m not the only person to run into this: https://github.com/vercel/next.js/issues/31009

Hope this helps somebody in the future.