webpack: Angular project build failed after upgrading to Webpack 5.79.0
Bug report
What is the current behavior?
After updating to version 5.79.0 I am receiving this error during the build on my angular project:
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
If the current behavior is a bug, please provide the steps to reproduce.
Update the package to version 5.79.0 and try to build the Angular project.
What is the expected behavior?
No errors during the build of the project.
Other relevant information: webpack version: 5.79.0 Node.js version: 14.X Operating System: Linux Additional tools:
About this issue
- Original URL
- State: open
- Created a year ago
- Reactions: 14
- Comments: 27 (13 by maintainers)
Commits related to this issue
- Pin webpack version to 5.78 due to storybook 6.5 incompatability. Reference issue: https://github.com/webpack/webpack/issues/16981 — committed to code-dot-org/code-dot-org by stephenliang 4 months ago
- Pin webpack version to 5.78 due to storybook 6.5 incompatability. Reference issue: https://github.com/webpack/webpack/issues/16981 — committed to code-dot-org/code-dot-org by stephenliang 4 months ago
Installing 5.78 fixed it for me for both Angular 15 (Custom webpack builder) and Storybook 6
We did have a chat around this and since this is not a supported use-case in this case users need to manage the versions themselves.
Therefore in this case changing the dev dependency to match the same
webpackversion provided by@angular-devkit/build-angularis the right solution.This could also be seen as feature request to the custom webpack builder, to provide access to the webpack used to avoid issues caused by mismatching versions.
@TheLarkInn no need to open an issue. I am on the Angular team and I am following this.
From the Angular CLI point of view, by using a non official builder the user made the decision to go off the supported path.
That said, let me have a chat with the rest of the team if we want to bump a dependency on a patch version.
@TheLarkInn maybe that’s a good idea, although I guess Angular CLI treats webpack as an internal dependency and they want to avoid things breaking as well. I think this issue only happens with Angular CLI when using @angular-builders/custom-webpack, but in that project I don’t even see a
webpackdependency (maybe in the goal of using whatever version Angular CLI already has installed).https://github.com/webpack/webpack/issues/16981#issuecomment-1507662465
I had to dedupe my webpacks.
npx yarn-deduplicatemight save your life.https://github.com/scinos/yarn-deduplicate
Appreciate the quick response @alan-agius4
@alan-agius4 To be honestly, it was not the public method, don’t know why it was used…
Using the same version that
@angular-devkit/build-angulardoes seem like a reasonable solution.That said, rename a non private method does sound like a breaking change to be.
Maybe the new property can be aliased with the old name, marked as deprecated and removed in the next major?
I think a lot of people using Angular + custom webpack with the Define plugin are going to run into this issue, since
@angular-devkit/build-angulardepends specifically onwebpack@5.76.1.Solutions I’m aware of (none are really ideal):
npm installan older version of wepback like 5.78 that stays “compatible” with 5.76npm dedupeto hopefully get just one version of webpack (will be 5.76.1 for the angular scenario above) - but also dedupes other node modulesI don’t know the “correct” solution here, but if it affects enough users, maybe the most user-friendly solution is to to keep webpack 5 versions compatible (i.e. don’t rename methods)?
/cc @alan-agius4
You are using DefinePlugin not from the same webpack version. You are using latest DefinePlugin, but building with old webpack
Отправлено с iPad
Due this https://github.com/webpack/webpack/commit/45754f45d06f01773f2c3a499591250c9c863f0e
/cc @vankop Can we return old name, looks like a breaking change and let’s put TODO for webpack v6