Couldn't import web3 library in react application - node.js

Question

ERROR in ./node_modules/cipher-base/index.js 3:16-43
Module not found: Error: Can't resolve 'stream' in 'C:\Users\Sumana\Desktop\Web3\web3app\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 }

Answer 1

You can fix this issue in 2 way .
Delete node_module then change your react-scripts version from "5.0.0" to "4.0.3" after that run npm install.
or
Configure webpack.
1 - install these packages .
npm install fs assert https-browserify os os-browserify stream-browserify stream-http react-app-rewired
2 - Create config-coverrides.js in Root dir of your project next to the package.json
const webpack = require('webpack');
module.exports = function override(config, env) {
config.resolve.fallback = {
url: require.resolve('url'),
fs: require.resolve('fs'),
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;
}

Answer 2

I have had this issue for the last week too. It has been documented in many place like this. I don't understand how to fix it but it seems like the people who made the library will fix it https://github.com/ChainSafe/web3.js/issues/4659

Answer 3

Install the polyfills for node.JS and adding two things to webpack.config.js:
npm install node-polyfill-webpack-plugin
In the file [node_modules > react-scripts > config > webpack.config.js] add:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
module.exports > return > plugins:
plugins: [
new NodePolyfillPlugin(),
……………
]
More on the solution:
https://github.com/Richienb/node-polyfill-webpack-plugin#readme