Angular 12 and Webpack 5: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
I recently upgraded one of my apps to Angular 12. Since I use Ionic as a framework and NX as a monorepo, I had done a dry run with a new empty app and the migration process was straightforward.
However, when I tried to migrate the actual application, I got the following error
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }A possible solution is offered in the error text:
However, Angular does not expose a webpack config file in its default configuration.
Note: I know that node-specific packages should not be used in front-end (application) code, but sometimes third-party packages do not follow this rule.
There is a package that will do this for you:
@angular-builders/custom-webpack
It can merge a webpack.config.js file into the default one, replacing the options. There is even the possibility for more fine-grained updates to the angular default webpack config. Follow the instructions provided in the package and you will be done in 20 minutes or less :-)
I decided to take a different approach and instead wrote a little script that runs after every npm install. Reference it in “postinstall” in package.json like this:
The script basically hacks the solution provided by webpack into the internal config of the angular builder.
This solved my problems after migration and worked perfectly for me.
However, side effects are possible, so be vigilant.
