Web Workers are broken in Next.js 11

[akshatmittal]

What version of Next.js are you using?

11

What version of Node.js are you using?

v14.16.0

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

Vercel

Describe the Bug

WebWorker behavior with Next.js 11 is highly volatile with several different errors occurring when importing them. ImportScripts also fails inside the workers. The project as-is worked fine with Next.js 10.2.3.

Expected Behavior

WebWorker works as expected.

To Reproduce

The default example for Web Workers is broken as well, shows the same issues. The importScripts can be reproduced by adding the importScripts code in the worker.

[maccman]

Seeing this too.

[rishimohan]

I'm facing similar issues with Web Workers #26144

[paescuj]

I'm affected too. Would be great to have some regression tests on at least a few of the examples.

[paescuj]

It does work in production build, but not in dev mode.
Seems like the path is wrong (static/chunks/static/chunks).
Temporary (and dirty) fix in next.config.js:

module.exports = {
  webpack: (config, { dev }) => {
    if (dev) {
      config.optimization.splitChunks = false;
    }
    return config;
  },
};

[rishimohan]

@paescuj I tried to build and the build went through, the issue is in dev environment only.

[rishimohan]

I can confirm @paescuj's solution works 👍 !

[akshatmittal]

It does work in production build, but not in dev mode.

I tried this out, but it fails if the Worker uses importScript or require. And yes, disabling splitChunks was my immediate dirty fix as well, sadly not something I can do in a fairly large production codebase.

Thanks for the tip though, I'm sure it'll help others coming here!

[paescuj]

I tried this out, but it fails if the Worker uses importScript or require.

Sounds similar to #25484

And yes, disabling splitChunks was my immediate dirty fix as well, sadly not something I can do in a fairly large production codebase.

While it's indeed very dirty, it should not affect the production build. (if (dev) {...)

Thanks for the tip though, I'm sure it'll help others coming here!

You're welcome! 😃

[akshatmittal]

Sounds similar to #25484

Interesting, this didn't happen to me on 10.2.3, but only happens on 11.

[paescuj]

Indeed very interesting! Sounds like a slightly different issue, though.
I'm having a lot of issues with web workers in Next.js - it's a bit frustrating... Hope it will get better soon 😃

[akshatmittal]

Indeed very interesting! Sounds like a slightly different issue, though.
I'm having a lot of issues with web workers in Next.js - it's a bit frustrating... Hope it will get better soon 😃

Same here! Can't upgrade until these issues are resolved, and I'm excited to try out some of the new features.

[lagz0ne]

Indeed very interesting! Sounds like a slightly different issue, though.
I'm having a lot of issues with web workers in Next.js - it's a bit frustrating... Hope it will get better soon 😃

Yeah, we stuck at the earlier version of Next and Webpack 4. Was trying out to migrate over to Next 11, among few other things, WebWorker is a real deal-breaker.

The DX seems better, we see much faster interaction on server, hope it gets solved soon

[timneutkens]

Can you provide a reproduction? Just checked the example and it runs fine, even with self.importScripts: https://github.com/vercel/next.js/tree/canary/examples/with-web-worker

Edits made:

./worker.js:

// This is a module worker, so we can use imports (in the browser too!)
import pi from "./utils/pi";

self.importScripts("/foo.js");

addEventListener("message", (event) => {
  postMessage(pi(event.data));
});

public/foo.js

console.log("test");

Tried in both dev and prod.

[timneutkens]

Figured out a way to reproduce it, has nothing to do with self.importScripts actually, when a worker was too large splitChunks (which should be disabled in dev) still caught on as the SplitChunksPlugin was initialized which is unintended. I've opened a PR: #26256 that also fixes an issue with HMR 👍

Reproduction:

// This is a module worker, so we can use imports (in the browser too!)
import pi from "./utils/pi";
// Importing a large (huge) library
import faker from 'faker'

console.log(faker)

self.importScripts("/foo.js");

addEventListener("message", (event) => {
  postMessage(pi(event.data));
});

[paescuj]

I see, that actually makes sense! Thanks a lot @timneutkens! 👍 Should also fix #19865 for me.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.