NX Angular project build failed after upgrading to Webpack 5.79.0

Question

My nx monorepo angular project builds correctly with version 5.78.0 but got the following errors after upgrading to 5.79.0

nx: 15.9.2 angular: 15.2.6

 Error: Module parse failed: parser.destructuringAssignmentPropertiesFor is not a function
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
You may need an additional loader to handle the result of these loaders.
TypeError: parser.destructuringAssignmentPropertiesFor is not a function

Expect the project to build correctly

Are you using nx migrate? – Andrew Allen Apr 13 '23 at 01:55 — Andrew Allen, Apr 13 '23 at 01:55
No, I updated it manually. – Eddie Chen Apr 13 '23 at 02:10 — Eddie Chen, Apr 13 '23 at 02:10

score 10 · Accepted Answer · answered Apr 13 '23 at 23:46

This looks like an issue with changes in webpack 5.79 if you are using a custom webpack config with the DefinePlugin.

I think it happens because there are multiple conflicting versions of webpack installed in node modules; the DefinePlugin is loaded from the newer version of webpack in node modules, but webpack itself is loaded from the Angular build tools version of wepback, which is older.

You can see this if you run npm ls webpack in your project folder:

> npm ls webpack

+-- @angular-devkit/build-angular@15.2.5
| +-- @angular-devkit/build-webpack@0.1502.5
| | `-- webpack@5.79.0 deduped
...
| `-- webpack@5.76.1

You can downgrade to an earlier version of webpack as a workaround:

npm i -D webpack@~5.78.0

Alternatively you can run npm dedupe, which will result in only webpack v5.76.1 being installed, but this also dedupes other node modules which might not be desirable.

Brilliant catch! My version happened to be exactly 5.79.0 after reinstalling a project. — David T, Apr 24 '23 at 12:00

score 0 · Answer 2 · answered Apr 15 '23 at 04:13

I had this error with JHipster v7.9.3 after generating code using my blueprint. The below worked for me, based on the above answer: I edited the blueprint client folder's package.json.ejs, per below:

  "devDependencies": {
    ...
    <%_
      // Saathratri Modification:
    _%>
    "webpack": "<%= dependabotPackageJson.devDependencies['webpack'] %>",
    <%_ 
      // Saathratri Modification end.
    _%>
    ...
  }

and commented out:

  <%_
  // Saathratri Modification:
  // "overrides": {
  //  "webpack": " dependabotPackageJson.devDependencies['webpack']"
  //},
  _%>

Now I get the following after running npm ls webpack from within my generated project's directory:

saathratri-app-holder@ /Users/amar/workspace/saathratri-app-holder
└─┬ organizationsservice@0.0.1-SNAPSHOT -> ./organizationsservice
  ├─┬ @angular-devkit/build-angular@14.2.1
  │ ├─┬ @angular-devkit/build-webpack@0.1402.1
  │ │ └── webpack@5.74.0 deduped
  │ ├─┬ @ngtools/webpack@14.2.1
  │ │ └── webpack@5.74.0 deduped
  │ ├─┬ babel-loader@8.2.5
  │ │ └── webpack@5.74.0 deduped
  │ ├─┬ css-loader@6.7.1
  │ │ └── webpack@5.74.0 deduped
  │ ├─┬ less-loader@11.0.0
  │ │ └── webpack@5.74.0 deduped
  │ ├─┬ mini-css-extract-plugin@2.6.1
  │ │ └── webpack@5.74.0 deduped
  │ ├─┬ postcss-loader@7.0.1
  │ │ └── webpack@5.74.0 deduped
  │ ├─┬ sass-loader@13.0.2
  │ │ └── webpack@5.74.0 deduped
  │ ├─┬ source-map-loader@4.0.0
  │ │ └── webpack@5.74.0 deduped
  │ ├─┬ stylus-loader@7.0.0
  │ │ └── webpack@5.74.0 deduped
  │ ├─┬ webpack-dev-middleware@5.3.3
  │ │ └── webpack@5.74.0 deduped
  │ ├─┬ webpack-dev-server@4.10.0
  │ │ └── webpack@5.74.0 deduped
  │ ├─┬ webpack-subresource-integrity@5.1.0
  │ │ └── webpack@5.74.0 deduped
  │ └── webpack@5.74.0 deduped
  ├─┬ browser-sync-webpack-plugin@2.3.0
  │ └── webpack@5.74.0 deduped
  ├─┬ copy-webpack-plugin@11.0.0
  │ └── webpack@5.74.0 deduped
  ├─┬ eslint-webpack-plugin@3.2.0
  │ └── webpack@5.74.0 deduped
  └─┬ webpack@5.74.0
    └─┬ terser-webpack-plugin@5.3.7
      └── webpack@5.74.0 deduped

Notice the correct Webpack version is being used - the one that should be used according to JHipster v7.9.3; the correct version of Webpack is 5.74.0 for JHipster v7.9.3.

All references to webpack@5.79.0 from the npm ls webpack command were no longer there and the parser.destructuringAssignmentPropertiesFor is not a function error went away when running ./mvnw clean package or ./mvnw spring-boot:run from the generated project's directory.

NX Angular project build failed after upgrading to Webpack 5.79.0

2 Answers2