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

ashwinGokhale · 2021-01-28T06:57:15Z

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

The text was updated successfully, but these errors were encountered:

sshakil-h2 · 2021-02-22T10:41:03Z

Are there any workarounds?

clonardo · 2021-02-25T01:34:21Z

+1, still looks like an issue. No easy workaround as far as I see, at a quick glance.

ChazUK · 2021-02-28T15:04:31Z

I'm trying to implement the correct format of @use in SCSS with the sass-loader but that requires the latest version of Webpack :(

github-actions · 2021-03-29T13:15:43Z

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

elenasch · 2021-04-02T02:32:36Z

This is still very much an issue, and a blocker for us to use Nx. Would love to see it make into the tools soon

smasala · 2021-04-23T14:09:43Z

Any updates on this? Still an issue with 12.0.8

smasala · 2021-04-23T17:12:39Z

One dreadful way around this is to download webpack 4 under an alias

yarn add -D webpack4@npm:webpack@4.42.0

Then add a post/uninstall script to move webpack 4

"postinstall": "mv ./node_modules/webpack4 ./node_modules/@nrwl/web/node_modules/webpack"

Then you can build the application

Jordan-Hall · 2021-05-12T15:08:55Z

I was taking a look at this yesterday. To fix this, NX needs to upgrade the base app to Webpack 5, which will cause some issues then remove https://github.com/nrwl/nx/blob/master/packages/web/src/utils/third-party/cli-files/plugins/named-chunks-plugin.ts this file then inside the common.ts file (https://github.com/nrwl/nx/blob/master/packages/web/src/utils/third-party/cli-files/models/webpack-configs/common.ts) and make a tweak to the optimization section:

optimization: {
      noEmitOnErrors: true,
      moduleIds: 'deterministic',
      chunkIds: buildOptions.namedChunks ? 'named' : 'deterministic',
      minimizer: [
        new HashedModuleIdsPlugin(),
        // TODO: check with Mike what this feature needs.
        new BundleBudgetPlugin({ budgets: buildOptions.budgets }),
        ...extraMinimizers,
      ],
    },

But then the run-webpack.ts will also need tweaking :/ not managed to solve that issue yet. Appears one of the function doesn't return the correct type :(

smasala · 2021-05-12T15:17:19Z

@Jordan-Hall correct, they are currently incompatible. The only way round it to patch it or "trick" it by giving@nrwl/web it's own local webpack version (i.e 4).

You can either do it as stated [above(https://github.com//issues/4627#issuecomment-825797960) or you could prob do it with yarn and Selective dependency resolutions. See: https://classic.yarnpkg.com/en/docs/selective-version-resolutions/ and https://github.com/yarnpkg/rfcs/blob/master/implemented/0000-selective-versions-resolutions.md

For example:

"resolutions": {
    "**/@nrwl/web/webpack": "4.46.0"
  },

Obviously, this only works if your web app in your mono-repo doesn't require webpack 5 but your angular apps do for example.

Jordan-Hall · 2021-05-12T15:22:35Z

Are they a reason we cant upgrade the whole of NX to Webpack 5? I don't mind carrying on working on it due to a requirement for a client.

smasala · 2021-05-12T15:27:41Z

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

smasala · 2021-06-08T16:13:23Z

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 · 2021-06-08T16:15:01Z

@FrozenPandaz qq why is there a react label on this?

Bulletninja · 2021-07-05T23:48:39Z

If i try to upgrade to webpack 5 i get this:

Cannot read property 'tap' of undefined
TypeError: Cannot read property 'tap' of undefined
    at /..../node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/index.js:236:65

which is this line:

compilation.hooks.additionalTreeRuntimeRequirements.tap(

which is referred to here:

pmmmwh/react-refresh-webpack-plugin#308 (comment)

ValentinFunk · 2021-07-13T14:48:07Z

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

gabrielgagne · 2021-07-15T15:09:17Z

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

camasuri · 2021-07-16T19:30:19Z

Hi everyone,

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

JustusNBB · 2021-07-22T14:55:11Z

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

ainulhassanml · 2021-12-20T15:26:29Z

@JustusNBB after running npx nx g @nrwl/web:webpack5 facing following error

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[3].oneOf[0].issuer has an unknown property 'test'. These properties are valid:
   object { and?, not?, or? }
   -> Logic operators used in a condition matcher.

any workaround to this issue?

keshav-kishor · 2022-03-11T05:41:57Z

after upgrading to NX 13 still getting a similar issue:
Error: Unable to resolve @nrwl/web:build. Cannot find executor 'build' in \node_modules\@nrwl\web\executors.json.

any workaround for this?

ValentinFunk · 2022-03-11T13:27:58Z

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

keshav-kishor · 2022-03-14T09:04:37Z

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

Thanks, @kamshak it worked

peter-coastpay-com · 2022-08-12T21:39:34Z

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

stuart-clark-45 · 2022-09-06T23:45:49Z

I have the same issue with a react application :/

hveiras · 2022-10-03T15:39:02Z

Tested in 14.x

Executors have been renamed

"executor": "@nrwl/node:execute" -> "executor": "@nrwl/node:node"
"executor": "@nrwl/node:build" -> "executor": "@nrwl/node:webpack"

also applies for web:build -> web:webpack

see AliYusuf95 reply here: #9168

PapaStef · 2022-12-20T17:15:32Z

This is still not working for me using @nrwl/web:dev-server when mapping env vars. I'm using 15.0.12 + Webpack 5:

new webpack.EnvironmentPlugin(ENV_VAR_ALLOW_LIST)

I'm getting the following error:

ERROR in Cannot read properties of undefined (reading 'tap')

jaysoo · 2023-02-27T18:16:52Z

This has been fixed a while back. If you are still using @nrwl/web make sure they are pointing to @nrwl/webpack. There is a migration to rename this for you, but if you manually upgraded packages you may have missed it.

We only support Webpack 5 now, not Webpack 4.

github-actions · 2023-03-30T00:07:16Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

ashwinGokhale added the type: bug label Jan 28, 2021

FrozenPandaz added the scope: react Issues related to React support for Nx label Jan 29, 2021

github-actions bot added the stale label Mar 29, 2021

github-actions bot removed the stale label Apr 2, 2021

jaysoo closed this as completed Feb 27, 2023

github-actions bot added the outdated label Mar 30, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ashwinGokhale commented Jan 28, 2021 •

edited

sshakil-h2 commented Feb 22, 2021

clonardo commented Feb 25, 2021

ChazUK commented Feb 28, 2021

github-actions bot commented Mar 29, 2021

elenasch commented Apr 2, 2021

smasala commented Apr 23, 2021 •

edited

smasala commented Apr 23, 2021 •

edited

Jordan-Hall commented May 12, 2021 •

edited

smasala commented May 12, 2021 •

edited

Jordan-Hall commented May 12, 2021

smasala commented May 12, 2021

smasala commented Jun 8, 2021 •

edited

smasala commented Jun 8, 2021

Bulletninja commented Jul 5, 2021

ValentinFunk commented Jul 13, 2021

gabrielgagne commented Jul 15, 2021

camasuri commented Jul 16, 2021 •

edited

JustusNBB commented Jul 22, 2021

ainulhassanml commented Dec 20, 2021

keshav-kishor commented Mar 11, 2022 •

edited

ValentinFunk commented Mar 11, 2022

keshav-kishor commented Mar 14, 2022

peter-coastpay-com commented Aug 12, 2022

stuart-clark-45 commented Sep 6, 2022

hveiras commented Oct 3, 2022

PapaStef commented Dec 20, 2022 •

edited

jaysoo commented Feb 27, 2023

github-actions bot commented Mar 30, 2023

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

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

Comments

ashwinGokhale commented Jan 28, 2021 • edited

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

Environment

sshakil-h2 commented Feb 22, 2021

clonardo commented Feb 25, 2021

ChazUK commented Feb 28, 2021

github-actions bot commented Mar 29, 2021

elenasch commented Apr 2, 2021

smasala commented Apr 23, 2021 • edited

smasala commented Apr 23, 2021 • edited

Jordan-Hall commented May 12, 2021 • edited

smasala commented May 12, 2021 • edited

Jordan-Hall commented May 12, 2021

smasala commented May 12, 2021

smasala commented Jun 8, 2021 • edited

smasala commented Jun 8, 2021

Bulletninja commented Jul 5, 2021

ValentinFunk commented Jul 13, 2021

gabrielgagne commented Jul 15, 2021

camasuri commented Jul 16, 2021 • edited

JustusNBB commented Jul 22, 2021

ainulhassanml commented Dec 20, 2021

keshav-kishor commented Mar 11, 2022 • edited

ValentinFunk commented Mar 11, 2022

keshav-kishor commented Mar 14, 2022

peter-coastpay-com commented Aug 12, 2022

stuart-clark-45 commented Sep 6, 2022

hveiras commented Oct 3, 2022

PapaStef commented Dec 20, 2022 • edited

jaysoo commented Feb 27, 2023

github-actions bot commented Mar 30, 2023

ashwinGokhale commented Jan 28, 2021 •

edited

smasala commented Apr 23, 2021 •

edited

smasala commented Apr 23, 2021 •

edited

Jordan-Hall commented May 12, 2021 •

edited

smasala commented May 12, 2021 •

edited

smasala commented Jun 8, 2021 •

edited

camasuri commented Jul 16, 2021 •

edited

keshav-kishor commented Mar 11, 2022 •

edited

PapaStef commented Dec 20, 2022 •

edited