Web3 Issue : React Application not compiling

Question

I am facing issue with React application while compilation. Please find the issue below and screenshot.

ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26
Module not found: Error: Can't resolve 'http' in '/Users/rohit/Downloads/Personal/web3/react-minting-website/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-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/index.js 10:0-24 14:13-17

On scrutiny, I found out Issue is with web3 related dependencies:

https://www.npmjs.com/package/web3
https://www.npmjs.com/package/@web3-react/core
https://www.npmjs.com/package/@web3-react/injected-connector

Can someone please help me with the same? I am using LTS versions, What are stable versions of these?

Please suggest something.

Answer 1

as webpack grows in size, they removed the polyfills in webpack5. Looks like you are using create-react-app (CRA) and webpack configuration is not exposed to the user in CRA. you can expose it using eject . you might have this script in package.json:

   "eject": "react-scripts eject"

so run npm run eject . This is not recommended because it means that you will no longer benefit from the updates of CRA.

you can handle ejecting with either rewire or craco .

After you get the webpack configuration, you need to add resolve property to webpack config and install all those required packages:

resolve: {
    extensions: [".js", ".css"],
    alias: {
      // add as many aliases as you like!
      // optional
      components: path.resolve(__dirname, "src/components"),
    },
    fallback: {
      // path: require.resolve("path-browserify"),
      fs: false,
      assert: require.resolve("assert/"),
      os: require.resolve("os-browserify/browser"),
      constants: require.resolve("constants-browserify"),
      stream: require.resolve("stream-browserify"),
      crypto: require.resolve("crypto-browserify"),
      http: require.resolve("stream-http"),
      https: require.resolve("https-browserify"),
    },
  },

Answer 2

Currently CRA ships react-scripts with version 5.0.0 . Instead of ejecting CRA, just downgrade react-scripts to version 4.0.3 . I was facing the same issue, downgrading worked for me.

First remove old version

npm uninstall react-scripts

Then run the following:

npm i react-scripts@4.0.3

Answer 3

Web3 and Create-react-app If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Refer the Solution in the Below link

https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues

Answer 4

It's because you are using the new version of Webpack, I've fixed the problem with adding the polyfills, you can see the complete implementation here:

https://github.com/EhsanParsania/React-Webpack5-Polyfill