I can't fix error while importing web3 in React

Question

I only want to import web3 in react, but always I see errors like below (7 errors!). I've installed the 'crypto-browserify', 'stream-http', 'https-browserify', but they don't work! Please help me if you have faced the similar issue before.

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can't resolve 'crypto' in 'D:\4_learning\Blockchain\React-Solidity-Web3\blockchain\contacts\node_modules\eth-lib\lib'

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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }
...

Answer 1

It's an issue with create-react-app and broken webpack v5. Lots of workarounds but I'm just using an older react until there's a good one.