next.js: Error: Cannot find module 'webpack'

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.

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, },

@alexissel please upvote the issue instead of commenting, unless you want to contribute with some extra knowledge 🙏

Quite a few people are subscribed to this thread and are getting unnecessary notifications (myself included).

If helps anyone, I had this same problem because of the css loader @zeit/next-css that has been deprecated. This package is now supported in Next.js out of the box, but using it in new versions of next gave me this weird message error of Cannot find module 'webpack'.

Just removing this package from my next.config.js solved the issue.

After upgrading from "next": "10.0.3" 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 worked for now.

Is this issue supposed to be fixed now? I can see that it was closed due to a pull request.

After being stuck on 10.0.5 because of this bug, I wanted to update to 10.1.2 today since I saw the pull-request merged and ticket closed. But as soon as I update I get an error when trying to build:

Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Require stack:
- /Users/maekeler/projects/makaira/storefront/node_modules/mini-css-extract-plugin/dist/loader.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/compiled/webpack/bundle4.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/compiled/webpack/webpack.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/next-server/server/config-utils.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/next-server/server/config.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/build/index.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/cli/next-build.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/bin/next

The related ticket is marked as a duplicate of this one: https://github.com/vercel/next.js/issues/21721

…but the problem is with next, not next-pwa. I’m getting the same error after upgrading to next@10.0.6 and next-pwa is not in my dependencies.

Same issue here. In our weekly depfu dependency bumps the GitHub action CI failed to build NextJS code because of this issue: https://github.com/skyra-project/skyra.pw/pull/230/checks?check_run_id=1801004086

Edit: upgrading to webpack 5 by adding it to dev dependencies, resolutions and adding future: { webpack5: true } to next.config.js (as suggested by @Manikanta-20 here) worked as a fix. It’s still an issue though, of course.

Indeed, it solves the issue but when i’m running next build, I now have these warnings :

info  - Creating an optimized production build .<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in '/home/divlo/Documents/Thream/website/node_modules/next/node_modules/chokidar'
<w> while resolving 'fsevents' in /home/divlo/Documents/Thream/website/node_modules/next/node_modules/chokidar to a directory
info  - Creating an optimized production build ...<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in '/home/divlo/Documents/Thream/website/node_modules/next/node_modules/chokidar'
<w> while resolving 'fsevents' in /home/divlo/Documents/Thream/website/node_modules/next/node_modules/chokidar to a directory
info  - Creating an optimized production build ..<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in '/home/divlo/Documents/Thream/website/node_modules/next/node_modules/chokidar'
<w> while resolving 'fsevents' in /home/divlo/Documents/Thream/website/node_modules/next/node_modules/chokidar to a directory

Also, I guess it’s only a temporary fix, I don’t think it’s viable to add future: { webpack5: true } in next.config.js and to install webpack as devDependencies, I would rather next manage these.

I am having the same issue, installing webpack5 as devDependencies did not solve the issue.

Is this issue supposed to be fixed now? I can see that it was closed due to a pull request.

After being stuck on 10.0.5 because of this bug, I wanted to update to 10.1.2 today since I saw the pull-request merged and ticket closed. But as soon as I update I get an error when trying to build:

Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Require stack:
- /Users/maekeler/projects/makaira/storefront/node_modules/mini-css-extract-plugin/dist/loader.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/compiled/webpack/bundle4.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/compiled/webpack/webpack.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/next-server/server/config-utils.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/next-server/server/config.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/build/index.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/cli/next-build.js
- /Users/maekeler/projects/makaira/storefront/node_modules/next/dist/bin/next

The related ticket is marked as a duplicate of this one: #21721

same errors occur when i want to customize less config

So I have also had this problem, and tried the 10.0.6-canary.0 version. This works surprisingly.

But bumping it to the next version, 10.0.6-canary.1 where webpack is inlined according to the following commit and file line in the package.json:

https://github.com/vercel/next.js/pull/20598/commits/099cd30b36cbd1dc3be6e3f9966a607100ea7dd4#diff-9c1a3867443c54525b4f24ef171f231a6e8bb065ffc8b7b62c4843d5ff62dd42L106-L108

Webpack is removed, so to me this means that any packages that were relying on that existence wouldn’t have webpack? (I stand to be corrected on this)

Because as soon as you move to the next version, these warnings show:

npm WARN clean-webpack-plugin@3.0.0 requires a peer of webpack@* but none is installed. You must install peer dependencies yourself.
npm WARN next-pwa@5.0.2 requires a peer of next@>=7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN next-pwa@5.0.2 requires a peer of webpack@>=4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN workbox-webpack-plugin@6.1.0 requires a peer of webpack@^4.4.0 || ^5.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN css-loader@4.3.0 requires a peer of webpack@^4.27.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@1.2.1 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @next/react-refresh-utils@10.0.6-canary.1 requires a peer of webpack@^4 || ^5 but none is installed. You must install peer dependencies yourself.
npm WARN @next/react-dev-overlay@10.0.6-canary.1 requires a peer of webpack@^4 || ^5 but none is installed. You must install peer dependencies yourself.

Whereas before that none of those messages came up.

This seems to persist to the main release, so does that mean it is needed to install webpack at the top project level? As most the packages that need web pack require it for dev, but not a dependancy. Are there side effects then?

This is related with https://github.com/shadowwalker/next-pwa/issues/151

If you install webpack in dev dependencies or in resolutions… the final bundle size for production is bigger than in 10.0.5 >=/

So as it turns out the webpack require hook does not work in the case @carloscuesta showed because webpack is not initialized by the time a user’s webpack plugins require webpack

Which is kind of a chicken/egg problem of having the config that enables webpack 5 in the file that has external modules that require webpack

workbox-webpack-plugin has this particular require at the top level which makes it even harder to solve:

const {
  matchPart
} = require('webpack').ModuleFilenameHelpers;

I can think of 2 ways to solve it:

• We have users that need this behavior add the require hook at the top of their next.config.js: require('next/webpack-backwards-compat-require-hook')
• We register the require hook with a default of webpack 4. Then when we check for future.webpack5, if it’s true we delete the require cache for next.config.js and re-require it with webpack 5 set in the require hook configuration.

I’m favoring the second approach as it allows for backwards compat with previous versions that have webpack customization that incorrectly requires webpack without having the dep available in it’s dependencies.

Both approaches allow for adding a warning when modules require webpack internals or webpack allowing us to add an err.sh link for this issue so that webpack plugins can be updated to use compiler.webpack instead.

It is kind of disheartening to find that relatively essential third party plugins like next-pwa are not tested at all. Would there be any interest in writing tests to ensure at least some of the basic examples actually build (if not work)?

I faced same problem with with-ant-design-pro-less example.

Please try using next@canary, a patch was applied.

Removing @zeit/next-css helps, but there are other packages that depends on it like @zeit/next-less.

I had to remove those as well, and in the case of @zeit/next-less, I had to replace it with custom Webpack rules to handle .less. With @zeit/next-css deprecated, I am wondering what is the “new” solution to using cssLoaderConfig ?

EDIT: I have a hacky workaround in place that works using some internals:

const { loader } = require("next/dist/build/webpack/config/helpers");
const { getGlobalCssLoader } = require("next/dist/build/webpack/config/blocks/css/loaders");

Same here, once upgraded to next 10.0.6 I get this error:

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'webpack'
Require stack:
- /node_modules/mini-css-extract-plugin/dist/index.js

Reverting back to 10.0.5 and everything goes back to normal

@techandmedia It’s clear. My goal is to integrate Ant design with tailwindcss with latest Next.js, do you have any example or guideline ? Thanks !

Why would you need both Ant Design and Tailwind CSS at the same time, maintaining a single source of truth of CSS is hard enough and you’re trying to use both? I don’t think it’s a good idea. Anyway, this thread is about webpack error, not CSS, so you might want to open another thread.

I’m getting TypeError: Cannot read property ‘startsWith’ of undefined… i’m so exhausted trying to get ant & next to work. i dont know what to do

if you are using next 10.0.6 or 10.0.5, try downgrading to delete _next and node_modules, and change in packege json, next js version to 10.0.4

Hi @mostafa-raafat , this is not fixed yet as far as I know, I’m still stuck on the old version.

Maybe @Timer you can give an update since you merged the pull request?

I think for the most part, most are probably using webpack@4 will solve most issues, I haven’t seen any change in the build sizes, most of them actually got a ‘little’ bit smaller.

Right now, I just did the following:

npm update, this bumped next.js to v10.0.6, and currently the package that had an issue next-pwa goes to v5.0.5.

Because next-pwa has version constraints, I then installed webpack@^4.0 which resulted in "webpack": "^4.46.0", being installed in the package.json file. NPM can pick the best version of webpack that way that satisfies the needs of all your packages.

I saw that there is some attempts to implement the suggestion by Tim to account for the packages that use the web pack version from Next.js. That seems to be a version 10.0.7

But personally, the fact that it was included in the builds anyway to begin with wouldn’t make any difference to including it directly as a dependency. Also noting the fact that with the next-pwa package, workbox from is actually the one that needs webpack and it has it as a peer dependency. Which from my understanding,

Below are the two builds, one with 10.0.5 and one with 10.0.6

10.0.5

10.0.6

I can confirm that this removes the error thats that I was seeing. Also for any comparison, this is the dependencies of my package.json

"dependencies": {
    "@fullhuman/postcss-purgecss": "^3.1.3",
    "animate.css": "^4.1.1",
    "bulma": "^0.9.1",
    "bulma-pricingtable": "^0.2.0",
    "classnames": "^2.2.6",
    "date-fns": "^2.17.0",
    "next": "^10.0.6",
    "next-pwa": "^5.0.5",
    "postcss-preset-env": "^6.7.0",
    "prismic-javascript": "^3.0.2",
    "prismic-reactjs": "^1.3.3",
    "react": "^17.0.1",
    "react-collapse": "^5.1.0",
    "react-dom": "^17.0.1",
    "sitemap": "^6.3.5",
    "webpack": "^4.46.0",
    "wysiwyg.css": "0.0.3"
  }

Edit: also, sorry I know it’s a Sunday, I would probably forget about this come Monday.

I have the exact same issue when upgrading to v10.0.6: Error: Cannot find module ‘webpack’

See my post above

Which part? Not upgrading next to 10.0.7?

Right now I fixed the issue with 10.0.7 and the workbox-webpack-plugin by explicitly requiring webpack:

npm i webpack —save-dev

@SylvainGarrigues

I had commented earlier (hidden under 40 items though) about installing webpack at the user level, I personally did not see any change in file size in local or production deployments, which is the conveyed idea that people seem to feel is the problem (please correct me if I misunderstand that).

When you consider that workbox tags webpack as peer dependency, that would mean next-pwa should have it, but it is still a peer one.

Which based on the latest updates to nom even, as the end user you should install it.

I did not have anything break installing webpack in a production app using next-pwa, it fixed it.

Also, workbox is pulling it in, and as Tim mentioned, also there is one odd one, so the initial fix didn’t work in that instance. (But should be appreciated really, that they are fixing it)

I have also just updated to ^10.0.7 with webpack installed and it still runs. So for a temporary fix, it doesn’t sound that bad or adversely affect having webpack added and still retain a functioning website?

edit: sorry to the 31 other people still subscribed to this :)

10.0.7 was released that holds the patch that solves the majority case where require('webpack') is used inside of webpack plugins: https://github.com/vercel/next.js/releases/tag/v10.0.7

@lexusdrumgold we’re going to provide guidance on enabling webpack 5 soon (so that everyone upgrades). Shipping both versions of webpack inside of Next.js was a part of that for dual-loading. resolutions only applies to dependencies so that’s why it didn’t work between versions (note that webpack 5 support was in beta).

@ReeceM the require hook is automatically inserted so it should work automatically.

@JoseGarciaM what I find interesting is that it isn’t the one that is directly requiring webpack, but the error is coming from the workbox-webpack-plugin.

The JS files in the next-pwa repo don’t seem to have needed it directly before anyway?

So I am not sure why that has been dropped then??

Same issue here. In our weekly depfu dependency bumps the GitHub action CI failed to build NextJS code because of this issue: https://github.com/skyra-project/skyra.pw/pull/230/checks?check_run_id=1801004086

Edit: upgrading to webpack 5 by adding it to dev dependencies, resolutions and adding future: { webpack5: true } to next.config.js (as suggested by @Manikanta-20 here) worked as a fix. It’s still an issue though, of course.

With typescript I’m getting what I suspect is a related error:

./node_modules/next/dist/build/webpack/plugins/build-manifest-plugin.d.ts:1:25
Type error: Could not find a declaration file for module 'next/dist/compiled/webpack/webpack'. '/home/adys/src/overframe/frontend/node_modules/next/dist/compiled/webpack/webpack.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/next` if it exists or add a new declaration (.d.ts) file containing `declare module 'next/dist/compiled/webpack/webpack';`

> 1 | import { webpack } from 'next/dist/compiled/webpack/webpack';
    |                         ^
  2 | import { Rewrite } from '../../../lib/load-custom-routes';
  3 | export declare type ClientBuildManifest = Record<string, string[]>;
  4 | export default class BuildManifestPlugin {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

also getting this error when running it on windows, downgraded to 10.0.5

Not sure how about the rest of you but this issue (combined with some other well known problems) has unfortunately plagued deployment of my project to insanity.

I can confirm that removing the ^ works but only intermittently. As soon as I try to Dockerize the app the ghost of webpack dependency comes back.

It drives me insane as well, as it breaks my client application by simply deploying to Vercel. Why would they decide to use the latest env when the package.json file says otherwise?

Try to rebuild the docker package from scratch by removing all previous instances; it might still have cache somewhere that still use the latest env and use it build your package.

@techandmedia It’s clear. My goal is to integrate Ant design with tailwindcss with latest Next.js, do you have any example or guideline ? Thanks !

It’s so sad that this broke my production deployment on Vercel as well without me changing even a line of code.

UPDATE: So I just noticed that if you have “next”: “^10.0.4”, in you package.json file, and you update one of your deps/devDeps, it changed the lock file to this “@next/env@10.0.7” !!

So I just change it to this by removing the symbol ^ “next”: “10.0.4”, remove the lock file, remove node modules, and re-install everyting and the lock file now return to normal “@next/env@10.0.4”

And now it works!!

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

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

I’ve searched the release docs, as well as the Next.js website - is this documented somewhere besides this issue thread?

Using v10.0.5, Storybook x Next.js monorepo users already had a difficult time enabling Webpack 5. After reading through #13341, I was finally able to find the correct resolutions configuration for my particular monorepo setup.

After upgrading to v10.0.6, the resolutions config was a moot point - I was unable to run my app without receiving configuration schema errors. It seemed that Webpack 5 was no longer being resolved. Not entirely sure, but I’m guessing this can be traced back to the removal of the webpack dependency, as with this issue.

The code snippet above, however, is what I needed to run my app without errors. If there isn’t already, it would be nice to have a discussion dedicated to Webpack 5 support thats regularly updated.

@timneutkens

@timneutkens, with regards the Canary patch for Next.js, is my understanding correct that it should provide a globally available webpack instance that would satisfy requirements of packages that used to depend on it?

I have installed webpack@4 as a dependency of my package and that worked using version 10.0.6 of next, also didn’t notice a change in my final build size. It also deployed and the site works.

I tried to run next@canary (tried 10.0.7-canary.4 and *-canary.8) and ran the build with next-pwa (naturally still the one some are having issues with) and the build fails again.

Question

Should there be some extra action taken to ensure the other packages know it exists? Like a flag or something? The release didn’t have much info about how the change is usable or if it was just an automatically available thing.

(sorry for pinging if that is a problem, sure you have been getting a bunch of mails, please respond when you have the time)

Unfortunately, it is still not working with next-pwa @timneutkens. See: https://github.com/shadowwalker/next-pwa/issues/151#issuecomment-778753393

I’m getting TypeError: Cannot read property ‘startsWith’ of undefined… i’m so exhausted trying to get ant & next to work. i dont know what to do

if you are using next 10.0.6 or 10.0.5, try downgrading to delete _next and node_modules, and change in packege json, next js version to 10.0.4

works for me!

I’m getting TypeError: Cannot read property ‘startsWith’ of undefined… i’m so exhausted trying to get ant & next to work. i dont know what to do

This work for me after a lot of error, first it show me a error in buffer.js at line 206, so looking some answer in stackoverflow, I drop here, and found that the problem is next js 10.0.6 introduces support for dual-loading webpack, but you need to make some changes in your next config js and update other repos that depend on webpack, so the fast solution is just downgrading next js to 10.0.5 and if you use next pwa update it to 3.1.5 and react stack to 17.0.1, and the error will dissappear.

With typescript I’m getting what I suspect is a related error:

./node_modules/next/dist/build/webpack/plugins/build-manifest-plugin.d.ts:1:25
Type error: Could not find a declaration file for module 'next/dist/compiled/webpack/webpack'. '/home/adys/src/overframe/frontend/node_modules/next/dist/compiled/webpack/webpack.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/next` if it exists or add a new declaration (.d.ts) file containing `declare module 'next/dist/compiled/webpack/webpack';`

> 1 | import { webpack } from 'next/dist/compiled/webpack/webpack';
    |                         ^
  2 | import { Rewrite } from '../../../lib/load-custom-routes';
  3 | export declare type ClientBuildManifest = Record<string, string[]>;
  4 | export default class BuildManifestPlugin {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I’m getting the same issue