Error: Cannot find module 'webpack'

What version of Next.js are you using?

10.0.6

What version of Node.js are you using?

14.15.4

What browser are you using?

Safari

What operating system are you using?

macOS

How are you deploying your application?

yarn build locally

Describe the Bug

I just updated to 10.0.6 version from 10.0.5 and im getting the next error: Error: Cannot find module ‘webpack’.

I found out that if I remove next-pwa it works, and the terminal output while building all of the errors came form next-pwa.

Expected Behavior

If I downgrade to 10.0.5 my project builds in dev and prod.

To Reproduce

Install the latest version of next and install next-pwa.

` yarn install v1.22.10 info No lockfile found. [1/4] 🔍 Resolving packages… warning next-pwa > workbox-webpack-plugin > workbox-build > rollup > fsevents@2.1.3: “Please update to latest v2.3 or v2.2” warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/joi@16.1.8: Switch to ‘npm install joi’ warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/address@2.1.4: Moved to ‘npm install @sideway/address’ warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/formula@1.2.0: Moved to ‘npm install @sideway/formula’ warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/pinpoint@1.0.2: Moved to ‘npm install @sideway/pinpoint’ [2/4] 🚚 Fetching packages… [3/4] 🔗 Linking dependencies… warning " > next-pwa@5.0.4" has unmet peer dependency “webpack@>=4.0.0”. warning “next-pwa > babel-loader@8.2.2” has unmet peer dependency “@babel/core@^7.0.0”. warning “next-pwa > babel-loader@8.2.2” has unmet peer dependency “webpack@>=2”. warning “next-pwa > workbox-webpack-plugin@6.1.0” has unmet peer dependency “webpack@^4.4.0 || ^5.9.0”. warning “next-pwa > clean-webpack-plugin@3.0.0” has unmet peer dependency “webpack@*”. warning " > tailwindcss-font-inter@2.0.0" has incorrect peer dependency “tailwindcss@^1.9.0”. [4/4] 🔨 Building fresh packages… success Saved lockfile. ✨ Done in 23.34s. jcgm@JoseloG-Macbook-Pro landing-site % yarn build
yarn run v1.22.10 $ next build Loaded env from /Users/jcgm/Dev/Kapital/landing-site/.env.local

Build error occurred Error: Cannot find module ‘webpack’ Require stack:

• /Users/jcgm/Dev/Kapital/landing-site/node_modules/workbox-webpack-plugin/build/generate-sw.js
• /Users/jcgm/Dev/Kapital/landing-site/node_modules/workbox-webpack-plugin/build/index.js
• /Users/jcgm/Dev/Kapital/landing-site/node_modules/next-pwa/index.js
• /Users/jcgm/Dev/Kapital/landing-site/next.config.js
• /Users/jcgm/Dev/Kapital/landing-site/node_modules/next/dist/next-server/server/config.js
• /Users/jcgm/Dev/Kapital/landing-site/node_modules/next/dist/build/index.js
• /Users/jcgm/Dev/Kapital/landing-site/node_modules/next/dist/cli/next-build.js
• /Users/jcgm/Dev/Kapital/landing-site/node_modules/next/dist/bin/next at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15) at Function.Module._load (internal/modules/cjs/loader.js:725:27) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.<anonymous> (/Users/jcgm/Dev/Kapital/landing-site/node_modules/workbox-webpack-plugin/build/generate-sw.js:18:17) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions…js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.<anonymous> (/Users/jcgm/Dev/Kapital/landing-site/node_modules/workbox-webpack-plugin/build/index.js:10:20) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions…js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) { code: ‘MODULE_NOT_FOUND’, requireStack: [ ‘/Users/jcgm/Dev/Kapital/landing-site/node_modules/workbox-webpack-plugin/build/generate-sw.js’, ‘/Users/jcgm/Dev/Kapital/landing-site/node_modules/workbox-webpack-plugin/build/index.js’, ‘/Users/jcgm/Dev/Kapital/landing-site/node_modules/next-pwa/index.js’, ‘/Users/jcgm/Dev/Kapital/landing-site/next.config.js’, ‘/Users/jcgm/Dev/Kapital/landing-site/node_modules/next/dist/next-server/server/config.js’, ‘/Users/jcgm/Dev/Kapital/landing-site/node_modules/next/dist/build/index.js’, ‘/Users/jcgm/Dev/Kapital/landing-site/node_modules/next/dist/cli/next-build.js’, ‘/Users/jcgm/Dev/Kapital/landing-site/node_modules/next/dist/bin/next’ ] } error Command failed with exit code 1. `

[timneutkens]

This happens because Next.js 10.0.6 introduces support for dual-loading webpack as part of our work towards providing an incremental way to go from webpack 4 to webpack 5 without breaking all Next.js apps. To achieve dual-loading we now bundle both webpack 4 and webpack 5 into Next.js, effectively removing the webpack dependency from the published package.

You can now opt-in to webpack 5 support using the following next.config.js:

// next.config.js
module.exports = {
  future: { webpack5: true }
}

With this change it seems that some Next.js apps that customize the webpack configuration (see the docs) are including webpack plugins that rely on the underlying app to have the webpack package available which would break with strict module resolving like pnp/pnpm or when the underlying package uses webpack but does not have the webpack dependency (like the case that Next.js has now). The solution to this would be to register a require hook in the Next.js bootup that links require('webpack') to the Next.js bundled version of webpack.

This does leave a chicken/egg problem because the require('webpack') in your apps is running the moment Next.js loads next.config.js, but that file sets the future flag for webpack 5 meaning we wouldn’t be able to alias it before loading next.config.js. The solution for that would be to change the webpack 5 enabling to be an env var or something like that.

We’ve opened an issue for it here: #21789

Random note for webpack plugin maintainers: webpack 5 introduced compiler.webpack exposing the webpack object to plugins without having to require('webpack') https://github.com/webpack/webpack/blob/master/lib/Compiler.js#L191.

[Manikanta-20]

Thanks @kachkaev

After upgrading from "next": "10.0.3"/ "next": "10.0.5" to "next": "10.0.6" and running yarn install:

yarn why webpack
yarn why v1.22.10
[1/4] 🤔  Why do we have the module "webpack"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
error We couldn't find a match!
✨  Done in 0.89s.

Adding "webpack": "^4.46.0" to package.json dependencies provided a workaround.

If anyone getting this error

Find below steps

1. Install "webpack": "^5.19.0" in devDependencies
2. Add in next.config.js future: { webpack5: true, },