Webpack error (MODULE_NOT_FOUND) for with-web-worker example

[nickbabcock]

What example does this report relate to?

with-web-worker

What version of Next.js are you using?

10.0.6

What version of Node.js are you using?

14.3.0

What browser are you using?

N/A

What operating system are you using?

Ubuntu 20.04

How are you deploying your application?

N/A

Describe the Bug

Unable to build:

yarn run v1.22.5
$ next dev
Error: Cannot find module 'webpack/lib/ParserHelpers'
Require stack:
- /home/nick/projects/next-temp/with-web-worker-app/node_modules/worker-plugin/dist/worker-plugin.js
- /home/nick/projects/next-temp/with-web-worker-app/next.config.js
- /home/nick/projects/next-temp/with-web-worker-app/node_modules/next/dist/next-server/server/config.js
- /home/nick/projects/next-temp/with-web-worker-app/node_modules/next/dist/next-server/server/next-server.js
- /home/nick/projects/next-temp/with-web-worker-app/node_modules/next/dist/server/next.js
- /home/nick/projects/next-temp/with-web-worker-app/node_modules/next/dist/server/lib/start-server.js
- /home/nick/projects/next-temp/with-web-worker-app/node_modules/next/dist/cli/next-dev.js
- /home/nick/projects/next-temp/with-web-worker-app/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1029:15)
    at Function.Module._load (internal/modules/cjs/loader.js:898:27)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at Object.<anonymous> (/home/nick/projects/next-temp/with-web-worker-app/node_modules/worker-plugin/dist/worker-plugin.js:5:37)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at Object.<anonymous> (/home/nick/projects/next-temp/with-web-worker-app/next.config.js:1:22)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/nick/projects/next-temp/with-web-worker-app/node_modules/worker-plugin/dist/worker-plugin.js',
    '/home/nick/projects/next-temp/with-web-worker-app/next.config.js',
    '/home/nick/projects/next-temp/with-web-worker-app/node_modules/next/dist/next-server/server/config.js',
    '/home/nick/projects/next-temp/with-web-worker-app/node_modules/next/dist/next-server/server/next-server.js',
    '/home/nick/projects/next-temp/with-web-worker-app/node_modules/next/dist/server/next.js',
    '/home/nick/projects/next-temp/with-web-worker-app/node_modules/next/dist/server/lib/start-server.js',
    '/home/nick/projects/next-temp/with-web-worker-app/node_modules/next/dist/cli/next-dev.js',
    '/home/nick/projects/next-temp/with-web-worker-app/node_modules/next/dist/bin/next'
  ]
}

Expected Behavior

For the example to build

To Reproduce

yarn create next-app --example with-web-worker with-web-worker-app
cd with-web-worker-app/
yarn dev

[Manc]

I just tried to add the worker-plugin to my Next.js project and ran into the same issue. I tried worker-plugin@^4.0.3 and worker-plugin@^5.0.0.

My theory is that Next.js comes with its own version of Webpack as it is not directly listed in a project's package.json and node_modules/webpack/ does not exist, but worker-plugin is referencing the missing file from there (require('webpack/lib/ParserHelpers')); see: https://github.com/GoogleChromeLabs/worker-plugin/blob/master/src/index.js#L23.

My workaround (only very briefly tested) is to manually add Webpack as dev dependency:

yarn add -D webpack@^4

[nickbabcock]

Installing webpack as an dependency gives a different error:

yarn create next-app --example with-web-worker with-web-worker-app2
cd with-web-worker-app2/
yarn add -D worker-plugin webpack@^4
yarn dev

Returns a the following error:

No template for dependency: ConstDependency

Which seems to be a common error for next.js projects trying to use workers

Using worker-plugin 5.0

yarn create next-app --example with-web-worker with-web-worker-app3
cd with-web-worker-app3/
yarn remove worker-plugin
yarn add -D worker-plugin webpack@^4
yarn dev

gives the same error:

No template for dependency: ConstDependency

[Manc]

Looks like a bug or breaking change in Next.js version 10.0.6 to me. I have tried a range of versions all the way up from 9.3 and the example stops working with 10.0.6. It seems there were quite a few Webpack related changes in 10.0.6. A simple downgrade to 10.0.5 (or earlier) appears to work.

[timneutkens]

Duplicate of #21679

[matanui159]

This does not seem like a duplicate. That issue was fixed by removing old plugins that are not required anymore. Your own example of using webworkers does not work.

[nickbabcock]

While this isn't the answer most are looking for -- my problem was solved by moving to webpack 5 with it's native web worker support:

next.config.js

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

some.js

const worker = new Worker(new URL("./worker.js", import.meta.url));
//  use worker

[matanui159]

That generates the following warning during development:

warn  - HotModuleReplacementPlugin
The configured output.hotUpdateMainFilename doesn't lead to unique filenames per runtime and HMR update differs between runtimes.
This might lead to incorrect runtime behavior of the applied update.
To fix this, make sure to include [runtime] in the output.hotUpdateMainFilename option, or use the default config.

And breaks in a production build:

972.undefined.js:1 GET http://localhost:3000/_next/static/chunks/972.undefined.js 404 (Not Found)

[nickbabcock]

Good spot, I hadn't tested a production build yet (and I tolerate the development warning, but maybe that foreshadows the production issue). So looks like there are some more kinks left with web workers, webpack 5, and next.js (this issue and then using wasm in web workers (#22581))

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