nx: @nrwl/web:build does not work with webpack 5

Current Behavior

Running yarn nx build <project_name> with webpack@5.18.0 on a React app, gives the following error:

Unable to resolve @nrwl/web:build.
Cannot find module 'webpack/lib/dependencies/ImportDependenciesBlock'

Expected Behavior

It should successfully build the React app.

Steps to Reproduce

Create nx workspace with a React app.
Add resolutions to package.json:

"resolutions": {
    "webpack": "5.18.0"
}

Run yarn
Run yarn nx build <project_name>

Failure Logs

Here is the full error log:

Unable to resolve @nrwl/web:build.
Cannot find module 'webpack/lib/dependencies/ImportDependenciesBlock'
Require stack:
- C:\Users\user\source\project\node_modules\@nrwl\web\src\utils\third-party\cli-files\plugins\named-chunks-plugin.js
- C:\Users\user\source\project\node_modules\@nrwl\web\src\utils\third-party\cli-files\models\webpack-configs\common.js
- C:\Users\user\source\project\node_modules\@nrwl\web\src\utils\web.config.js
- C:\Users\user\source\project\node_modules\@nrwl\web\src\builders\build\build.impl.js
- C:\Users\user\source\project\node_modules\@nrwl\tao\src\shared\workspace.js
- C:\Users\user\source\project\node_modules\@nrwl\tao\src\commands\run.js
- C:\Users\user\source\project\node_modules\@nrwl\tao\index.js
- C:\Users\user\source\project\node_modules\@nrwl\cli\lib\run-cli.js

Environment

  Node : 12.18.3
  OS   : win32 x64
  yarn : 1.22.5

  nx : Not Found
  @nrwl/angular : 11.1.2
  @nrwl/cli : 11.1.2
  @nrwl/cypress : 11.1.2
  @nrwl/devkit : 11.1.2
  @nrwl/eslint-plugin-nx : 11.1.2
  @nrwl/express : 11.1.2
  @nrwl/jest : 11.1.2
  @nrwl/linter : 11.1.2
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : 11.1.2
  @nrwl/react : 11.1.2
  @nrwl/schematics : Not Found
  @nrwl/tao : 11.1.2
  @nrwl/web : 11.1.2
  @nrwl/workspace : 11.1.2
  typescript : 4.1.3

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 17
Comments: 28 (9 by maintainers)

Most upvoted comments

Version 12.3.6 of @nrwl/web:

/node_modules/webpack/lib/Dependency.js:311
                throw new Error(
                ^

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
at ProvidedDependency.set (/node_modules/webpack/lib/Dependency.js:311:9)
    at iterationDependencies (/node_modules/@nrwl/web/node_modules/webpack/lib/Compilation.js:940:21)

smasala on Jun 10, 2021

I think the builder is called @nrwl/web:webpack now @keshav-kishor

ValentinFunk on Mar 11, 2022

Any news on this? With webpack5 now being the default for angular apps I just ran into this issue upgrading the workspace

ValentinFunk on Jul 13, 2021

It’s on the roadmap - there are also quite a few inconsistencies with the storybook plugin too

smasala on May 12, 2021

I think the builder is called @nrwl/web:webpack now @keshav-kishor

Thanks, @Kamshak it worked

keshav-kishor on Mar 14, 2022

Somehow managed to break my setup with this too (I am on NX 11), seems NX 12 allows to manually enable Webpack5 npx nx g @nrwl/web:webpack5

https://nx.dev/latest/react/guides/webpack-5

JustusNBB on Jul 22, 2021

is this issue still open? I am seeing an error like this

peter-coastpay-com on Aug 12, 2022

Hi everyone,

I have the same issue, any update that can help us?

camasuri on Jul 16, 2021

Version 12.3.6 of @nrwl/web:

/node_modules/webpack/lib/Dependency.js:311
                throw new Error(
                ^

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
at ProvidedDependency.set (/node_modules/webpack/lib/Dependency.js:311:9)
    at iterationDependencies (/node_modules/@nrwl/web/node_modules/webpack/lib/Compilation.js:940:21)

Same problem here, fresh app created with ‘nx generate @nrwl/web:app myapp’

nwrl/web 12.5.8

gabrielgagne on Jul 15, 2021