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

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

score 3 · Accepted Answer · answered Feb 15 '22 at 14:48

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

After initiating a React app as so
```
npx create-react-app my-app
cd my-app
```

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

Then you open your favourite code editor in my case it is MS VS Code editor as so on your terminal
```
code .
```
Create a JS file in the Root directory as config-overrides.js

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

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!

score 0 · Answer 2 · answered Feb 13 '22 at 16:50

0

Try installing the missing modules using

npm i stream crypto

answered Feb 13 '22 at 16:50

Theo

1
1

score 0 · Answer 3 · answered Apr 04 '22 at 06:15

I am following simple steps to overcome this issue.

After you import web3 to the client app folder, uninstall react-scripts@5.0.0
then reinstall react-scripts but a lower version of 4.0.3 npm install react-scripts@4.0.3

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

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

3 Answers3