This looks like a new issue with many packages including web3 as these are not compatible with Webpack v5 without adding fallbacks for the polyfils.

Issue noted here: https://github.com/facebook/create-react-app/issues/11756

I solved this issue by adding the fallback to my webpack.config.js file;

module.exports = {
    resolve: {
        fallback: {
            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'),
            stream: require.resolve('stream-browserify'),
        },
    },
};

but also need but got compilation errors on the build process:

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error

this was resolved by adding to my .env file;

GENERATE_SOURCEMAP=false

hope this helps.

I resolve these errors but my app did not render. If you are interested to clear these errors you can paste code right into your-project/node_modules/react-scripts/config/webpack.config.js but these changes can be overwritten after rebuilding your app. Find in module.exports object resolve and write fallback,in your case it's "crypto": require.resolve("crypto-browserify").

And install dependency npm install crypto-browserify.

resolve: {
//   fallback: {
//     "fs": false,
//     "tls": false,
//     "net": false,
//     "http": require.resolve("stream-http"),
//     "https": false,
//     "zlib": require.resolve("browserify-zlib") ,
//     "path": require.resolve("path-browserify"),
//     "stream": require.resolve("stream-browserify"),
//     "util": require.resolve("util/"),
       "crypto": require.resolve("crypto-browserify")
} 

Or you can add fallback using react-app-rewired as was described in Github https://github.com/facebook/create-react-app/issues/11756 Install react-app-rewired, create config-overrides.js file in the root of your project. My code in the file

module.exports = function override (config, env) {
    console.log('override')
    let loaders = config.resolve
    loaders.fallback = {
        "fs": false,
        "tls": false,
        "net": false,
        "http": require.resolve("stream-http"),
        "https": false,
        "zlib": require.resolve("browserify-zlib") ,
        "path": require.resolve("path-browserify"),
        "stream": require.resolve("stream-browserify"),
        "util": require.resolve("util/"),
        "crypto": require.resolve("crypto-browserify")
    }
    
    return config
}

In package.json change scripts from 'start': 'react-scripts start' to 'start': 'react-app-rewired start'. Then start project npm run start or yarn start

take a look. if it may help anyone

https://namespaceit.com/blog/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error

i overcame this problem by typing

npm audit fix --force

Webpack 5 no longer automatically includes Node.js module polyfills. If your project uses web3 , eth-lib , or other libraries that depend on crypto , you must install and configure the polyfill manually.

 npm install crypto-browserify

and in the Webpack configuration:

 resolve: {
 fallback: {
 crypto: require.resolve("crypto-browserify")
 }
}

If you're using Create React App, check out the solution linked in the React issue, as it requires additional configuration using react-app-rewired or craco .