Next.js: next (7+) webpack bootstrap file interrupts workers load

[Jabher]

Bug report

When loading any web worker with Next 7+ (at least), it crashes.

Describe the bug

any non-window entity (Service Worker, Web Worker etc) still gets var parentHotUpdateCallback = window["webpackHotUpdate"]; inside it. this causes crash with Uncaught ReferenceError: window is not defined error during bootstrap in dev mode

To Reproduce

use https://github.com/jabher/next-no-workers

Expected behavior

workers working

System information

• OS: [e.g. macOS, Windows] Windows
• Browser (if applies) [e.g. chrome, safari] Chrome 69
• Version of Next.js: [e.g. 6.0.2] 7.0.0, 7.0.1-beta.0

[timneutkens]

Hmm I wonder if this is a Next.js issue 🤔 I'm assuming it's related to the way we changed loading of pages, which is that now we register the page module itself.

[Jabher]

@timneutkens I think this can be quick-fixed with replacement of window with global. hot-reload will stop working in workers, but this is still better than breaking everything.

I would make this change by myself, but I'm unsure about where the bootstrap code is coming from.

[timneutkens]

It's coming from webpack itself, I guess it might be a bug 🤔

[timneutkens]

Maybe we have to implement ignore-loader on the server side 🤔 inside of next-workers

[Jabher]

Is it possible to be fixed by some line in config for now, as a temp solution?
what do you think?

[timneutkens]

Try doing this:

module.exports = {
  webpack(config, { isServer }) {
    if (isServer) {
      config.module.rules.push({
        test: /\.worker\.js$/,
        loader: "ignore-loader"
      });
    } else {
      config.module.rules.push({
        test: /\.worker\.js$/,
        loader: "worker-loader",
        options: nextConfig.workerLoaderOptions || {
          name: "static/[hash].worker.js",
          publicPath: "/_next/"
        }
      });
    }
  }
}

If this works we can add it to next-workers

[Jabher]

Nope :( still not working.

error on client is still emerging

[timneutkens]

Oh you mean it's referencing window inside the worker itself, that sounds like a webpack bug 🤔

[Jabher]

kinda. I figured out how to make it work, but it seems as a workaround. This is a bug of hot loader,
https://github.com/webpack-contrib/worker-loader/issues/142.

I've fixed it via

    if (!isServer) {
      config.output.globalObject = 'self'
    }

[Jabher]

I think this should work in general (as long as self === window.self === window), but I'm unsure whether this is standard or not. I'm pretty sure it is, but I cannot confirm it.

[timneutkens]

I believe this was fixed in @zeit/next-workers@canary: https://github.com/zeit/next-plugins/blob/master/packages/next-workers/index.js#L20