Can't find worker file

[niklasravnsborg]

Hey @tomlagier!

Thanks for your article and this repo. I tried to use it as a reference for a project where I try to load a web worker that is written in Typescript with Next 11 / Webpack 5. In my project I couldn't get Next.js to expose the worker file so I tried to download your repository. It turns out, I get the same error here:

I just added a console.log statement to index.tsx.

const workerUrl = new URL('../src/ts.worker.ts', import.meta.url);
console.log(workerUrl);
tsWorkerRef.current = new Worker(workerUrl);

When I manually navigate to http://localhost:3000/_next/94ab9802796300a474cd.ts, I also get the 404. I would assume, that you should get the same behavior. Do you have an idea on how to fix this?

[tomlagier]

Hmm.. I'll take a look now.

[tomlagier]

Interestingly, I'm not getting this behavior with either next dev or next build && next start. If you next build, what's the .next folder look like? Can you find the missing file there?

Here's the network requests after next build && next start:

I think it's gotta be an environment issue here - something bound to the port, some version mismatch, etc.

[niklasravnsborg]

Hey, it turns out, adding the workerUrl constant is causing the issue:

This works fine:

tsWorkerRef.current = new Worker(new URL('../src/ts.worker.ts', import.meta.url));

This causes the error I experienced:

const workerUrl = new URL('../src/ts.worker.ts', import.meta.url);
console.log(workerUrl);
tsWorkerRef.current = new Worker(workerUrl);

I guess this is some kind of Webpack behavior and it can only bundle static webworker files when they can be analyzed in one statement.

Thank you for checking :)