Webpack 5 Undefined Builtin Web Worker on Production Build for with-web-worker

[nickbabcock]

What example does this report relate to?

with-web-worker

What version of Next.js are you using?

10.0.6 -> 10.0.8

What version of Node.js are you using?

v14.16

What browser are you using?

N/A

What operating system are you using?

Ubuntu 20.04

How are you deploying your application?

both (next start) and (next export) are effected

Describe the Bug

In production mode, an app that uses webpack 5's builtin support for web worker will try to load the web worker js from (emphasis mine):

_next/static/chunks/185.undefined.js

This will fail due to the file not existing even though webpack will successfully output the chunk:

_next/static/chunks/185.5767725c6bc7a481fcd4.js

This does not effect development. The web worker loads and executes fine in development, though the worker does log the following error:

ReferenceError: assignment to undeclared variable _N_E

Expected Behavior

For the web worker to be bundled appropriately for production builds

To Reproduce

Take the web worker example:

npx create-next-app --example with-web-worker with-web-worker-app

And apply the following changes

Replace next.config.js with:

module.exports = {
  future: {
    webpack5: true,
  },
}

pages/index.js

--- a/pages/index.js
+++ b/pages/index.js
@@ -3,7 +3,7 @@ import { useEffect, useRef, useCallback } from 'react'
 export default function Index() {
   const workerRef = useRef()
   useEffect(() => {
-    workerRef.current = new Worker('../worker.js', { type: 'module' })
+    workerRef.current = new Worker(new URL('../worker.js', import.meta.url));
     workerRef.current.onmessage = (evt) =>
       alert(`WebWorker Response => ${evt.data}`)
     return () => {

Optionally remove worker-loader dependency as webpack 5 has web worker support builtin

Execute:

npm run build && npm run start

Open the page and the console will immediately log the error. This effects next export as well.

I did try and see if #21977 fixes the issue (rebasing it off v10.0.8 in the process), but it did not.

This is the continuation of the following discussion: #22096

EDIT: current debugging status:

• doesn't appear related to the split chunks config as setting it to dev mode doesn't resolve the issue.
• current best guess is that it has something to do with the addition of async anonymous entrypoints
• react-loadable-manifest.json contains a top level "undefined" key 🤔

[nemanja-tosic]

I've managed to get around this by looking at webpack's proposals, namely:

config.output.chunkFilename =  options.isServer
  ? `${options.dev ? '[name]' : '[name].[fullhash]'}.js`
  : `static/chunks/${options.dev ? '[name]' : '[name].[fullhash]'}.js`;

from webpack/webpack#12676

[nickbabcock]

Great tip! Here is the complete next.config.js for the workaround:

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config, { isServer, dev }) => {
    config.output.chunkFilename = isServer
      ? `${dev ? "[name]" : "[name].[fullhash]"}.js`
      : `static/chunks/${dev ? "[name]" : "[name].[fullhash]"}.js`;

    return config;
  },
};

Interestingly the console logs an error with this approach:

ReferenceError: assignment to undeclared variable _N_E

But I haven't noticed what this effects yet. I will continue to test this workaround.

Also if I'm reading that issue correctly, the bug of contenthash resolving to undefined should have been fixed in webpack v5.22.0 and next.js 10.0.8 ships with webpack 5.24.3, so I'm not sure why this workaround is needed.

[nemanja-tosic]

The fact that webpack says it's solved did confuse me a bit as well, however i think they had some back and forth on it, so not sure what happened there.

As for

ReferenceError: assignment to undeclared variable _N_E

That one is interesting, not sure if you tracked it down, it is the result of a 'use strict' statement in a compiled file, the file I believe represents the compiled worker. Excerpt from it:

/*
 * ATTENTION: An "eval-source-map" devtool has been used.
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (function() { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./worker/worker.ts":
/*!**************************!*\
  !*** ./worker/worker.ts ***!
  \**************************/

If you were to delete that 'use strict' from .next/static/chunks/< worker file name >.js the error would go away. I would assume this has something to do with webpack, but it is only a guess. I can't tell if it's causing any harm yet.

[nickbabcock]

I've not yet tracked down the solution to:

ReferenceError: assignment to undeclared variable _N_E

The _N_E originates from next.js though the problem may very well be webpack

next.js/packages/next/build/webpack-config.ts

Line 869 in b267635

library: isServer ? undefined : '_N_E',

So far I've yet to notice detrimental effects from this error. The only thing that it has an impact on is the Lighthouse score, which doesn't like errors written to the console.

Tested on next.js 10.0.9 to see if that had an impact -- it does not

[ForbesLindesay]

Adding self._N_E = undefined; to the end of the web worker silences this error, which seems fine since we haven't noticed any other impact.

Edit:

That worked for about 5 minutes, not sure why it stopped working.

[nickbabcock]

Next.js 10.1 resolves:

ReferenceError: assignment to undeclared variable _N_E

So no more console errors 🎉

The following workaround is still needed to avoid undefined references, however:

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config, { isServer, dev }) => {
    config.output.chunkFilename = isServer
      ? `${dev ? "[name]" : "[name].[fullhash]"}.js`
      : `static/chunks/${dev ? "[name]" : "[name].[fullhash]"}.js`;

    return config;
  },
};

[maccman]

Do I still need to use this workaround with Next 10.2.3?

[paescuj]

Seems like the workaround is no longer required in Next.js 11.

[nickbabcock]

Excellent, I verified that the example and my own web worker app functions without the workaround in next 11. 🎉

Closing the issue.

[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.