next.js: Nextjs 13.4.9 - Error: Cannot find module 'webpack'

I’m using NextJS 13.4.9 in my case I just yarn add -D webpack webpack as a devDependency.

1 First thing I did, still worked 2-4 thanks! 5-7 no, next comes with webpack prebundled, so you should definitely not need to install it yourself. This sounds like a bug, will look, more into it. (@luizeboli thats true for you too, webpack should not be added as a dependency)

@alifa20 I will wait for 13.4.10 to release first, then revert later with a note in next-pwa’s docs 😃

@DuCanhGH Your suggested version definitely fixed the issue with existing next.js v13.4.9 .

Thanks for jumping in and updating this issue thread 🙏

Also thanks to @shuding that his PR seems to fix the issue for v13.4.10-canary.5 Also the latest version of both libraries work together as well.

✅ Link to the commit of the fix next-pwa 9.2.1, next.js v13.4.9 ✅ Link to the commit of the fix next-pwa ^9.1.4, next.js v13.4.10-canary.5 ✅ Link to the commit of the fix next-pwa 9.2.1, next.js v13.4.10-canary.5

@balazsorban44 Thanks for the reply.

1. So when running yarn dev, you’d need to load the localhost:3000 to see the error. The error comes up after loading the browser, and not just after running the yarn dev command.

➜  next-js-demo git:(update-next-js-13.4.9) ✗ yarn dev
yarn run v1.22.19
warning nextarter-chakra@0.1.0: The engine "pnpm" appears to be invalid.
$ next dev
- ready started server on 0.0.0.0:3000, url: http://localhost:3000
> [PWA] PWA support is disabled
> [PWA] PWA support is disabled
- event compiled client and server successfully in 206 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 78 ms (20 modules)
- wait compiling /page (client and server)...
- wait compiling /_error (client and server)...
- event compiled client and server successfully in 6.1s (2530 modules)
- warn Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
- error Error: Cannot find module 'webpack'
Require stack:
- /Users/<my_mac_user>/my/next-js-demo/node_modules/workbox-webpack-plugin/build/generate-sw.js
- /Users/<my_mac_user>/my/next-js-demo/node_modules/workbox-webpack-plugin/build/index.js
- /Users/<my_mac_user>/my/next-js-demo/node_modules/next-pwa/index.js
- /Users/<my_mac_user>/my/next-js-demo/next.config.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at /Users/<my_mac_user>/my/next-js-demo/node_modules/next/dist/server/require-hook.js:185:36
    at Module._load (node:internal/modules/cjs/loader:922:27)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/Users/<my_mac_user>/my/next-js-demo/node_modules/workbox-webpack-plugin/build/generate-sw.js:18:35)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12) {
  type: 'Error',
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/<my_mac_user>/my/next-js-demo/node_modules/workbox-webpack-plugin/build/generate-sw.js',
    '/Users/<my_mac_user>/my/next-js-demo/node_modules/workbox-webpack-plugin/build/index.js',
    '/Users/<my_mac_user>/my/next-js-demo/node_modules/next-pwa/index.js',
    '/Users/<my_mac_user>/my/next-js-demo/next.config.js'
  ]
}
Error: Cannot find module 'webpack'
Require stack:
- /Users/<my_mac_user>/my/next-js-demo/node_modules/workbox-webpack-plugin/build/generate-sw.js
- /Users/<my_mac_user>/my/next-js-demo/node_modules/workbox-webpack-plugin/build/index.js
- /Users/<my_mac_user>/my/next-js-demo/node_modules/next-pwa/index.js
- /Users/<my_mac_user>/my/next-js-demo/next.config.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at /Users/<my_mac_user>/my/next-js-demo/node_modules/next/dist/server/require-hook.js:185:36
    at Module._load (node:internal/modules/cjs/loader:922:27)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/Users/<my_mac_user>/my/next-js-demo/node_modules/workbox-webpack-plugin/build/generate-sw.js:18:35)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/<my_mac_user>/my/next-js-demo/node_modules/workbox-webpack-plugin/build/generate-sw.js',
    '/Users/<my_mac_user>/my/next-js-demo/node_modules/workbox-webpack-plugin/build/index.js',
    '/Users/<my_mac_user>/my/next-js-demo/node_modules/next-pwa/index.js',
    '/Users/<my_mac_user>/my/next-js-demo/next.config.js'
  ]
}

I believe the stack error is very similar to what @Marcus-Rise has mentioned actually.

1. Removing next-pwa from next.config.js seems to make the error go away. 👍
2. I tried using @ducanh2912/next-pwa as you suggested, but still same error. ❌
3. When I add webpack yarn add -D -E webpack it seems like it fixes the issue. You don’t see the error, it might be because you have installed webpack globally? ¯\(ツ)/¯ 🤷‍♂️
4. I have updated the pr for the changes we mentioned above: https://github.com/alifa20/next-js-demo/pull/1/commits
5. After checking the code changes in next repo: https://github.com/vercel/next.js/compare/v13.4.8…v13.4.9#diff-5f0a6c7f8a0c0b2d7e6c0f5a8e5b7a9b6d8b3f9d3e7c2a2d5f0c9a5b8e1c6f6 seems like one of the PRs have made the project need to have webpack installed separately. My guess is this pr https://github.com/vercel/next.js/pull/52186/files#diff-5f0a6c7f8a0c0b2d7e6c0f5a8e5b7a9b6d8b3f9d3e7c2a2d5f0c9a5b8e1c6f6R54 PR link: https://github.com/vercel/next.js/pull/52186

@balazsorban44 I’m also experiencing this error using the library https://github.com/dlehmhus/next-with-linaria. At least for me the error starts in release v13.4.9-canary.3.

https://github.com/vercel/next.js/compare/v13.4.9-canary.2...v13.4.9-canary.3