web3 giving issues in Webpack 5

[naklecha]

I am getting the following error when running my Angular code.

./node_modules/cipher-base/index.js:2:16-43 - Error: Module not found: Error: Can't resolve 'stream' in 'D:\projects\knip\app\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 'D:\projects\knip\app\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/ethereumjs-util/dist/account.js:4:13-30 - Error: Module not found: Error: Can't resolve 'assert' in 'D:\projects\knip\app\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/object.js:4:13-30 - Error: Module not found: Error: Can't resolve 'assert' in 'D:\projects\knip\app\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/keccak/lib/api/keccak.js:1:22-39 - Error: Module not found: Error: Can't resolve 'stream' in 'D:\projects\knip\app\node_modules\keccak\lib\api'

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/keccak/lib/api/shake.js:1:22-39 - Error: Module not found: Error: Can't resolve 'stream' in 'D:\projects\knip\app\node_modules\keccak\lib\api'

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/web3-eth-accounts/lib/index.js:30:76-93 - Error: Module not found: Error: Can't resolve 'crypto' in 'D:\projects\knip\app\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 'D:\projects\knip\app\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-providers-http/lib/index.js:30:11-26 - Error: Module not found: Error: Can't resolve 'http' in 'D:\projects\knip\app\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 'D:\projects\knip\app\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 'D:\projects\knip\app\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 'D:\projects\knip\app\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 'D:\projects\knip\app\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 } 

[NorthHub]

This helped me fix the problem

I have installed the following packages

npm i buffer process stream-browserify os-browserify stream-http https-browserify url

In the webpack config I added:

const webpack = require("webpack")
...

module.exports = {
  ...
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
      process: "process/browser",
    }),
  ],
  resolve: {
    fallback: {
      http: require.resolve("stream-http"),
      https: require.resolve("https-browserify"),
      crypto: require.resolve("crypto-browserify"),
      stream: require.resolve("stream-browserify"),
      os: require.resolve("os-browserify/browser"),
      url: require.resolve("url"),
      assert: require.resolve("assert"),
    },
  },
};

After that, everything worked for me on webpack 5

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions. If you believe this was a mistake, please comment.

[naklecha]

Thanks @NorthHub

[Muzammilshabbir]

I am getting the same error with react

[Muzammilshabbir]

This error occur when importing web3

[guillermoFragachan]

I am getting the same error, Where is that web pack config file?

This helped me fix the problem

I have installed the following packages

npm i buffer process stream-browserify os-browserify stream-http https-browserify url

In the webpack config I added:

const webpack = require("webpack")
...

module.exports = {
  ...
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
      process: "process/browser",
    }),
  ],
  resolve: {
    fallback: {
      http: require.resolve("stream-http"),
      https: require.resolve("https-browserify"),
      crypto: require.resolve("crypto-browserify"),
      stream: require.resolve("stream-browserify"),
      os: require.resolve("os-browserify/browser"),
      url: require.resolve("url"),
      assert: require.resolve("assert"),
    },
  },
};

After that, everything worked for me on webpack 5

[guillermoFragachan]

Guys I fixed it by downgrading the react scripts

npm uninstall react-scripts

and then

npm i react-scripts@4.0.3

[shiratsu]

@guillermoFragachan

Guys I fixed it by downgrading the react scripts

npm uninstall react-scripts

and then

npm i react-scripts@4.0.3

i could resolve a problem by applying it.
Thank you!

[guillermoFragachan]

for other people I would advise using a different react version, install version 16, which works perfectly with web3, it is a little annoying but you won't have debugging issues.

React uses webpack 5 and that version is not compatible with the current version of web3, this could bring issues later on even if the scripts are in version 4

[zialink]

const webpack = require("webpack")
...

module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
process: "process/browser",
}),
],
resolve: {
fallback: {
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
os: require.resolve("os-browserify/browser"),
url: require.resolve("url"),
assert: require.resolve("assert"),
},
},
};

Downgrading react-script fixed my problem as well. Thank you very much.

[xcitydev]

for other people I would advise using a different react version, install version 16, which works perfectly with web3, it is a little annoying but you won't have debugging issues.

React uses webpack 5 and that version is not compatible with the current version of web3, this could bring issues later on even if the scripts are in version 4

Sorry Im using version 18 and still getting this error