import web3 into react js getting BREAKING CHANGE: webpack < 5 used to incl

Question

I am having problems with importing web3 into reactjs. To replicate my problem, initiallize a new react app as so

npx create-react-app my-app
cd my-app

then open terminal in this location. Write:

npm install web3
npm install

in the App,js file add the following line

import Web3 from "web3"; 

I got the error after I do npm start then I got the unsolved error which is

Module not found: Error: Can't resolve 'stream'

Module not found: Error: Can't resolve 'crypto'

I tried finding a solution online, in particular I tried each of

1. How to Polyfill node core modules in webpack 5
2. https://www.youtube.com/watch?v=u1PPNIBvQjk
3. Importing web3 causing a problem in react js
4. https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736
5. https://namespaceit.com/blog/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error
6. How to create React App including Web3 using create-react-app? I am getting Module not found Error. BREAKING CHANGE: webpack < 5 used

None seem to work with me. Is there any advice on how to solve this problem? Thank you!

Consistence

Answer 1

This is my solution as of Feb 2, 2022. This might change at a future date.

1. After initiating a React app as so

   npx create-react-app my-app
   cd my-app
   

2. you will need to install a few packages:

    npm i web3, react-app-rewired, url, assert, buffer, crypto-browserify, stream-http, https-browserify, stream-browserify, os-browserify
   

3. Then you open your favourite code editor in my case it is MS VS Code editor as so on your terminal

   code .
   
   

4. Create a JS file in the Root directory as config-overrides.js

5. Copy and paste the code available here

    const webpack = require('webpack');
    module.exports = function override(config, env) {
        //do stuff with the webpack config...
   
        config.resolve.fallback = {
            url: require.resolve('url'),
            assert: require.resolve('assert'),
            crypto: require.resolve('crypto-browserify'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            os: require.resolve('os-browserify/browser'),
            buffer: require.resolve('buffer'),
            stream: require.resolve('stream-browserify'),
        };
        config.plugins.push(
            new webpack.ProvidePlugin({
                process: 'process/browser',
                Buffer: ['buffer', 'Buffer'],
            }),
        );
   
        return config;
    }
   
   

6. Open the package.json changed the scripts commands to this:

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test",
       "eject": "react-app-rewired eject"
     },
   
   

This has solved the problem for me!

Consistence

Answer 2

I am following simple steps to overcome this issue.

1. After you import web3 to the client app folder, uninstall [email protected]

2. then reinstall react-scripts but a lower version of 4.0.3 npm install [email protected]

i have not needed any other clumsy steps so far...Give it a try..

Ragout

Answer 3

My Solution as of Aug 22, 2022

import the web3.min.js (from CDN or serve it locally) by adding the following to your public/index.html

<script src="web3.min.js"></script>

And use it in your component (TS) as :

const {Web3} = (window as any);
const web3 = new Web3(Web3.givenProvider);
const contractInstance = new web3.eth.Contract(contract.ABI, contract.address);

Pissed

Answer 4

Try installing the missing modules using

npm i stream crypto

Anticline