BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

[wdunn001]

Bug Report

Affected Package

Angular/Core 12.0.0

Is this a regression?

Yes, the previous version in which this bug was not present was: 11.x.x

Description

You now receive an error while building an angular application regarding node polyfills and Webpack 5
https://i.stack.imgur.com/SpjFk.png

this is because of the following breaking change in Webpack 5
https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed

This breaking change didn't exist in previous versions of angular. We use node class libraries shared across the front and backend.

Minimal Reproduction

https://github.com/wdunn001/polyfill-example

Exception or 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: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }

Your Environment

Angular Version:

12.0.0

While this is a known breaking change and is easy to fix with Webpack 5 separately as far as I know it requires third party NPM libraries to fix in Angular which might not be an option for me.

[alan-agius4]

Hi,

While it is not adviced to use libraries that use Node.JS modules in a browser application, you can use tsconfig path mappings to point the a custom polyfill.

Example

  "compilerOptions": {
    ..
    "paths": {
      "assert": [
        "./assert.ts"
      ]
    }
  },

[hugoebarboza]

If I don't want to include a polyfill, which file do I need to update in order to resolve the problem ?
resolve.fallback: { "assert": false }

[damogallagher]

I have the following error in my console since upgrading to angular 12 and also upgrading all other libraries
`./node_modules/aws-amplify-angular/ivy_ngcc/dist/src/components/interactions/chatbot/chatbot.component.core.js:118:0-35 - Error: Module not found: Error: Can't resolve 'util' in '/Users/damiengallagher/Development/sourceControl/c-research/grievance-platform/frontend/node_modules/aws-amplify-angular/ivy_ngcc/dist/src/components/interactions/chatbot'

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: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }`

Can anyone provide any guidance on how to solve this? Similar to @hugoebarboza - what files need to be updated

[clydin]

@damogallagher That appears to be more of an issue with the aws-amplify-angular package that Webpack 5 is now exposing. aws-amplify-angular seems to be importing a Node.js builtin module inside an Angular component file (location). The import is also for the isUndefined function which has been deprecated in Node.js since v4.0 (https://nodejs.org/api/util.html#util_util_isundefined_object)

[PowerKiKi]

A different solution for a different package. In my case crypto-js was the cause of the error.

I migrated my code from crypto-js to crypto-es . It was straightforward because crypto-es is a fork, but with the advantages of not using node crypto, including typings, and being ESM (so potential tree shaking).

[damogallagher]

Thanks for the suggestions guys - I tried all of these as well as updating my tsconfig files to match the latest files in a new Angular 12 project but no joy
I still get these exceptions
`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: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }`

Any other suggestions available?

[damogallagher]

My issue was fixed by following instructions here

[patrikmojzis]

Can anyone provide any guidance on how to solve this? Similar to @hugoebarboza - what files need to be updated

Try to edit ./node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js

And under resolve add fallback:

resolve: {
    ***
    fallback: {
        "util": require.resolve("util/")
    }
},

Don't forget install util:
npm i util

[clydin]

@damogallagher The aws-amplify-angular package has a legitimate issue that should ideally be corrected which would avoid any workarounds.

[damogallagher]

Yes I hope to revert what I needed to do once that package is updated

…

On Thu 27 May 2021, 16:12 Charles, ***@***.***> wrote: @damogallagher <https://github.com/damogallagher> The aws-amplify-angular package has a legitimate issue that should ideally be corrected which would avoid that workaround. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#20819 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN2WKYBRHGECC6YSJ7KJJLTPZONFANCNFSM45AMLZBA> .

[hugoebarboza]

Hello @damogallagher , @patrikmojzis Thank you all...

[luismendes070]

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"resolve":{
"fallback":{
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify")
}

},
      "paths": {
  "assert": [
    "./assert.ts"
  ]
},
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": true,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2020",
"module": "es2020",
"lib": [
  "es2018",
  "dom"
]

},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}