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
}
}

[raman-nbg]

Why is this issue closed? It is not clear how to solve this. Shouldn't angular-cli bring the required polyfills to run ng test?

[raman-nbg]

In my case the error only occurred runnin ng test. The error only happens if you have import "jasmine"; in your *.spec.ts files. Removing the import solved the issue for me.

[boeckMt]

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

Fixed it with:
npm i path-browserify -D

// tsconfig.json

"compilerOptions": {
...
    "paths": {
      "path": [
        "./node_modules/path-browserify"
      ]
    }

[shrek-kurata]

if you got above the error, maybe you wrongly import 'protractor'.

[ps2goat]

My issue was fixed by following instructions here

That's funny because that issue points back here as being the answer ☜(ﾟヮﾟ☜)

[LingVuDev]

For me, installing assert and buffer did the trick:

npm install assert buffer --save-dev

I have got this error message:

./node_modules/safe-buffer/index.js:2:13-30 - Error: Module not found: Error: Can't resolve 'buffer' in '[local_route]/node_modules/safe-buffer'

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

[vaerilius]

npm i path-browserify
and add webpack.config.js =>

resolve: {
extensions: [".tsx", ".ts", ".js", ".json"],
fallback: { path: require.resolve("path-browserify") },
},

[nhhockeyplayer]

it seems a group of developers across the ecosystem require a severe dope slap for wiping out the ecosystem
I have yet to build since June still cant see a solution I want to work into my elite codeebase as of yet I not stooping down to these low levels of development hack

and all we find are workarounds forcing unwanted packages paths and more dysfunctional webpack javascript hack

no one wants webpack.... same for javascript its unwanted not needed and a pestilence to the ecosystem

the idiots are outnumbering the elites now and its a serious problem
something has to be done

elite frameworks like angular were running the lead fine for 5 years now unimpeded

and now its all wiped out by HACKS

it all started when the python geeks punched a hole thru the middle tier to the back end and said wow look what we can do
but they had no real ammo to go in and do anything realistic
yet it found its way into defense contractors disturbingly
the javascript $jquery tsunami was bad enough and still plaguing the field by some idiot who decided to put a $ sign on the syntax BECAUSE SOMEONE TOLD HIM HE WOULD MAKE ALOT OF MONEY

same grade of hack happening with the webpack npm gang and now with the angular 12 release and the elite nrwl/nx wiped off the map

so whoever is in charge take charge
review your committers
review whats being committed
roll it all back
take back the ground we had in 2020

because somewhere within the seams you will find one likely more political react hacks sabotaging the angular framework so they can have their junk engine manipulating every app on the planet under the hood

angular had react beat hands down in 2018 effortlessly was not even a competition
but now what do we see...

wake up tech leads to whats happening before your eyes and act

[AlaaEl-DinAhmed]

I solved this issue by installing util

npm i util

[fausrguez]

In my case, the issue was related with importing environment from the server and that wasn't available in the browser.

import { environment } from 'main.server'; -> import { environment } from 'environments/environment';

[roanvanstaveren]

I have read every single comment in this discussion, have tried every possible solution and still am without luck.

I am quite new to Angular and Front-End development in general, what am I doing wrong?

[raman-nbg]

@roanvanstaveren the error could be in the imports any code file.

One option could be to remove all code files from your project and then add them again step by step. After each file (or at least component) you should try to build your project.

Then you can figure out from which file/import the error is coming.

This isn't a straightforward solution but maybe this helps...

[raman-nbg]

@alan-agius4 I think we should reopen this issue and find an appropriate solution.

[mMohamed451]

this solution fixed my issue,
npm install path-browserify

open tsconfig.json and put this code

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
      "path": [
        "./node_modules/path-browserify"
      ]
    },
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": false,
    "strictInputAccessModifiers": false,
    "strictTemplates": false
  }
}

and maybe you have to install also util
npm install util

[alan-agius4]

In a nutshell the problem here happens when web application depends on libraries which are not meant to run in Web environments.

For legacy compatibility reasons Webpack 4 polyfilled Node.js core modules by default which resulted in an undefined and sometimes broken behaviour. Webpack 5 stopped automatically polyfilling Node.js core modules and focuses more on web compatible modules.

As per example above (#20819 (comment)), you can configure the polyfills using TypeScript path mappings. That being said, this should used as a workaround as ideally whenever possible one should move away from using libraries in Web applications that were not intended to run in a browser environment.

[BaamAadmi]

"paths": { "path": [ "./node_modules/path-browserify" ] },

Adding the above to the tsconfig fixed my issue. You don't need to install anything if you already have browserify.

[themizzi]

Removing the package that had node dependencies removed the error for me. Thanks, @alan-agius4.

[hermanwhyd]

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

Fixed it with:
npm i path-browserify -D

// tsconfig.json

"compilerOptions": {
...
    "paths": {
      "path": [
        "./node_modules/path-browserify"
      ]
    }

Thanks, this solution is working for me:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "allowSyntheticDefaultImports": true,
    // "strictFunctionTypes": true,
    // "noImplicitReturns": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "path": [
        "./node_modules/path-browserify"
      ]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}
`

tips: is you using a extends, just make sure put the code on the base config.

[AlaaEl-DinAhmed]

In a nutshell the problem here happens when web application depends on libraries which are not meant to run in Web environments.

For legacy compatibility reasons Webpack 4 polyfilled Node.js core modules by default which resulted in an undefined and sometimes broken behaviour. Webpack 5 stopped automatically polyfilling Node.js core modules and focuses more on web compatible modules.

As per example above (#20819 (comment)), you can configure the polyfills using TypeScript path mappings. That being said, this should used as a workaround as ideally whenever possible one should move away from using libraries in Web applications that were not intended to run in a browser environment.

yes, that's right after debugging for 3 hours the problem was because of using a library that depends on xmlbuilder2.

[KostaD02]

Have almost same error , does anoyone got fix ? working with angular 12
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: { "https": require.resolve("https-browserify") }'
- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "https": false }

[mlbiche]

I had this issue when running Angular tests only because I was using By keyword (as mentioned in Angular Testing documentation) and I imported it from protractor instead of @angular/platform-browser, if it can help anyone 🙂

[seth-church]

When upgrading our angular app to version 12, we ran into this issue as well. After doing an npm i util, our build worked, but we stil had this console error on app load:

util.js:109 Uncaught ReferenceError: process is not defined
    at Object.94655 (util.js:109)

We fixed this by adding the following to our polyfill.ts file:

(window as any).process = {
  env: { DEBUG: undefined },
};

according to these instructions.

[doughlass]

When upgrading our angular app to version 12, we ran into this issue as well. After doing an npm i util, our build worked, but we stil had this console error on app load:

util.js:109 Uncaught ReferenceError: process is not defined
    at Object.94655 (util.js:109)

We fixed this by adding the following to our polyfill.ts file:

(window as any).process = {
  env: { DEBUG: undefined },
};

according to these instructions.

Spent the past 24 hours trying to figure this out and the docs say to use webpack.config.js which doesn't work. but this snippet you added works great!

[RouR]

https://stackoverflow.com/questions/67572355/webpack-5-angular-polyfill-for-node-js-crypto-js

[ftanrisevdi]

Hi all,
I just want to share our solution to cypress+cucumber+webpack5 issue that has been occured after angular 12 update
first we got the error below;

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

To solve this, install path-browserify and add your webpack.config.js the line below;

resolve: {
    ......
    fallback: { path: require.resolve('path-browserify') }
  },

Then we got this error from cypress

The following error originated from your test code, not from Cypress.

  > process is not defined

To solve this, install node-polyfill-webpack-plugin and add to your webpack.config.js as a plugin

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
...
plugins: [new NodePolyfillPlugin()],

Cheers

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}