Couldn't import web3 library in react application

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 }

I ansered this here https://stackoverflow.com/questions/70559396/webpack-breaking-change/70560145#70560145 — Yilmaz, Jan 05 '22 at 03:06
Does this answer your question? [Webpack breaking change](https://stackoverflow.com/questions/70559396/webpack-breaking-change) — st.huber, Jan 10 '22 at 08:29

score 5 · Answer 1 · answered Jan 18 '22 at 18:16

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

This answer the question. – Sulung Nugroho Jan 26 '22 at 15:50 — Sulung Nugroho, Jan 26 '22 at 15:50

score 0 · Answer 2 · answered Jan 02 '22 at 22:27

0

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

answered Jan 02 '22 at 22:27

maaneth

1

there is no solution over there so far thanks for your response – Sumana Jan 03 '22 at 05:08

score 0 · Answer 3 · answered Jul 26 '22 at 22:41

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

Couldn't import web3 library in react application

3 Answers3

Linked