Couldn't import web3 library in react application

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