Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: Cannot find module 'webpack' #21679

Closed
JoseGarciaM opened this issue Jan 30, 2021 · 71 comments · Fixed by #22583
Closed

Error: Cannot find module 'webpack' #21679

JoseGarciaM opened this issue Jan 30, 2021 · 71 comments · Fixed by #22583
Labels
bug Issue was opened via the bug report template.

Comments

@JoseGarciaM
Copy link

JoseGarciaM commented Jan 30, 2021

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 > [email protected]: "Please update to latest v2.3 or v2.2"
warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/[email protected]: Switch to 'npm install joi'
warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/[email protected]: Moved to 'npm install @sideway/address'
warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/[email protected]: Moved to 'npm install @sideway/formula'
warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/[email protected]: 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/[email protected]: This version has been deprecated and is no longer supported or maintained
warning next-pwa > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/[email protected]: Moved to 'npm install @sideway/pinpoint'
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > [email protected]" has unmet peer dependency "webpack@>=4.0.0".
warning "next-pwa > [email protected]" has unmet peer dependency "@babel/core@^7.0.0".
warning "next-pwa > [email protected]" has unmet peer dependency "webpack@>=2".
warning "next-pwa > [email protected]" has unmet peer dependency "webpack@^4.4.0 || ^5.9.0".
warning "next-pwa > [email protected]" has unmet peer dependency "webpack@*".
warning " > [email protected]" 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. (/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. (/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.
    `
@JoseGarciaM JoseGarciaM added the bug Issue was opened via the bug report template. label Jan 30, 2021
@carloscuesta
Copy link

This is related with shadowwalker/next-pwa#151

@icflorescu
Copy link

...but the problem is with next, not next-pwa. I'm getting the same error after upgrading to [email protected] and next-pwa is not in my dependencies.

@GregTrifan
Copy link

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

@kachkaev
Copy link
Contributor

kachkaev commented Jan 30, 2021

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.

@Manikanta-20
Copy link

Manikanta-20 commented Jan 30, 2021

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
image

Find below steps

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

@jleclanche
Copy link
Contributor

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.

@JoseGarciaM
Copy link
Author

JoseGarciaM commented Jan 30, 2021

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

@aralroca
Copy link
Contributor

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

@darkmavis1980
Copy link

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

@favna
Copy link

favna commented Jan 31, 2021

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.

@ReeceM
Copy link

ReeceM commented Jan 31, 2021

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:

099cd30#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 [email protected] requires a peer of webpack@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of next@>=7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@>=4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.4.0 || ^5.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.27.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @next/[email protected] requires a peer of webpack@^4 || ^5 but none is installed. You must install peer dependencies yourself.
npm WARN @next/[email protected] 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?

@AndreiRupertti
Copy link

AndreiRupertti commented Feb 1, 2021

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.

@iAmLakshya
Copy link

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

@theoludwig
Copy link
Contributor

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.

@ReeceM
Copy link

ReeceM commented Feb 2, 2021

I think this might have been more of a breaking change? It seems that there were some packages where the magic of not having to worry about using webpack when adding things to a nextjs project might have created some packages that have indirectly assumed that webpack is installed with next, or that the user has it installed already.

@timneutkens
Copy link
Member

timneutkens commented Feb 2, 2021

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.

@JoseGarciaM
Copy link
Author

Next-PWA just released a new version 5.0.5 without webpack, so we might need to wait for your solution @timneutkens =(

@ReeceM
Copy link

ReeceM commented Feb 2, 2021

@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??

@MrSaints
Copy link

MrSaints commented Feb 2, 2021

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");

@alexissel

This comment has been minimized.

@kachkaev
Copy link
Contributor

kachkaev commented Feb 3, 2021

@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).

@ReeceM
Copy link

ReeceM commented Feb 24, 2021

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 :)

@user28111999
Copy link

Removing any @zeit/next-sass & @zeit/next-css dependencies fixed it for me.

@kodiakhq kodiakhq bot closed this as completed in #22583 Feb 27, 2021
kodiakhq bot pushed a commit that referenced this issue Feb 27, 2021
This pull request ensures the webpack hook is installed before an attempt is made to load the configuration.

This pull request is tested by the PnP tests, which should now be passing as a result of this change.

---

Fixes #21679
ygkn added a commit to rits-dajare/rits-dajare.github.io that referenced this issue Mar 2, 2021
tomer-tgp pushed a commit to thegoodparty/tgp-webapp that referenced this issue Mar 16, 2021
@MrAvantiC
Copy link

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

@millievn
Copy link

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

@mostafa-raafat
Copy link

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

Could someone tell me how to fix this issue?

@MrAvantiC
Copy link

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?

@mengtongun
Copy link

Hello anyone have met this issue?

image

@balazsorban44
Copy link
Member

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.

@vercel vercel locked as resolved and limited conversation to collaborators Feb 9, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

Successfully merging a pull request may close this issue.