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

jcurbelo · January 6, 2022, 1:17am

This issue is related to [SOLVED] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default

I was following this example: https://github.com/MoralisWeb3/demo-apps/tree/main/moralis-angular-app

Steps:

Installed moralis SDK with npm i moralis
Tried to create an angular service:

import { Injectable } from '@angular/core';
import { Moralis } from 'moralis';
import { environment } from 'src/environments/environment';
export type User = Moralis.User<Moralis.Attributes>;
export type Web3ProviderType = 'metamask' | 'walletconnect' | 'walletConnect' | 'wc';

@Injectable({
  providedIn: 'root'
})
export class MoralisService {

  user?: User;

  constructor() { }
}

Angular cli throws the following errors when ng serve my app:


./node_modules/cipher-base/index.js:2:16-43 - Error: Module not found: Error: Can't resolve 'stream' in '/Users/robin/github/nfprint/ngprint/node_modules/cipher-base'

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

./node_modules/eth-lib/lib/bytes.js:9:193-227 - Error: Module not found: Error: Can't resolve 'crypto' in '/Users/robin/github/nfprint/ngprint/node_modules/eth-lib/lib'

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

ethereumjs-util:12:13-30 - Error: Module not found: Error: Can't resolve 'assert' in '/Users/robin/github/nfprint/ngprint/node_modules/eth-sig-util/node_modules/ethereumjs-util/dist'

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 }

./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/account.js:4:13-30 - Error: Module not found: Error: Can't resolve 'assert' in '/Users/robin/github/nfprint/ngprint/node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist'

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 }

./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/object.js:4:13-30 - Error: Module not found: Error: Can't resolve 'assert' in '/Users/robin/github/nfprint/ngprint/node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist'

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 }

ethereumjs-util:12:13-30 - Error: Module not found: Error: Can't resolve 'assert' in '/Users/robin/github/nfprint/ngprint/node_modules/ethereumjs-tx/node_modules/ethereumjs-util/dist'

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 }

./node_modules/ethereumjs-util/dist.browser/account.js:42:31-48 - Error: Module not found: Error: Can't resolve 'assert' in '/Users/robin/github/nfprint/ngprint/node_modules/ethereumjs-util/dist.browser'

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 }

./node_modules/ethereumjs-util/dist.browser/address.js:7:31-48 - Error: Module not found: Error: Can't resolve 'assert' in '/Users/robin/github/nfprint/ngprint/node_modules/ethereumjs-util/dist.browser'

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 }

./node_modules/ethereumjs-util/dist.browser/object.js:26:31-48 - Error: Module not found: Error: Can't resolve 'assert' in '/Users/robin/github/nfprint/ngprint/node_modules/ethereumjs-util/dist.browser'

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 }

./node_modules/web3-eth-accounts/lib/index.js:26:76-93 - Error: Module not found: Error: Can't resolve 'crypto' in '/Users/robin/github/nfprint/ngprint/node_modules/web3-eth-accounts/lib'

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

./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js:7:193-227 - Error: Module not found: Error: Can't resolve 'crypto' in '/Users/robin/github/nfprint/ngprint/node_modules/web3-eth-accounts/node_modules/eth-lib/lib'

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

./node_modules/web3-provider-engine/node_modules/ethereumjs-util/dist/index.js:12:13-300m - Error: Module not found: Error: Can't resolve 'assert' in '/Users/robin/github/nfprint/ngprint/node_modules/web3-provider-engine/node_modules/ethereumjs-util/dist'

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 }

./node_modules/web3-providers-http/lib/index.js:30:11-26 - Error: Module not found: Error: Can't resolve 'http' in '/Users/robin/github/nfprint/ngprint/node_modules/web3-providers-http/lib'

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

./node_modules/web3-providers-http/lib/index.js:32:12-28 - Error: Module not found: Error: Can't resolve 'https' in '/Users/robin/github/nfprint/ngprint/node_modules/web3-providers-http/lib'

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 }

./node_modules/xhr2-cookies/dist/xml-http-request.js:37:11-26 - Error: Module not found: Error: Can't resolve 'http' in '/Users/robin/github/nfprint/ngprint/node_modules/xhr2-cookies/dist'

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

./node_modules/xhr2-cookies/dist/xml-http-request.js:39:12-28 - Error: Module not found: Error: Can't resolve 'https' in '/Users/robin/github/nfprint/ngprint/node_modules/xhr2-cookies/dist'

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 }

./node_modules/xhr2-cookies/dist/xml-http-request.js:41:9-22 - Error: Module not found: Error: Can't resolve 'os' in '/Users/robin/github/nfprint/ngprint/node_modules/xhr2-cookies/dist'

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



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

cryptokid · January 6, 2022, 8:29am

Did you try react scripts version 4? You may find similar posts on this forum about problems with version 5.

Somto · February 17, 2022, 10:03am

I have been battling with this for over a week now. i cannot read my view functions with any of the provided steps or solutions in this forum on angular.

YosephKS · February 17, 2022, 10:45am

Hey which steps are you referring to?