Web3 don't work with latest of React

Is there an existing issue for this?

[X] I have searched the existing issues

Current Behavior

I have an issue with web3 with latest version of react. It can't be imported in code.

The message is:

Compiled with problems:X

ERROR in ./node_modules/browserify-sign/node_modules/safe-buffer/index.js 4:13-30

Module not found: Error: Can't resolve 'buffer' in 'project/node_modules/browserify-sign/node_modules/safe-buffer'

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

 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/store/user-context.js 7:0-24
 @ ./src/index.js 9:0-59 13:38-57

25 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.65.0 compiled with 25 errors and 27 warnings in 261 ms

Expected Behavior

I am expected that the import with

import Web3 from 'web3';

still work

Steps to Reproduce

1) Create a new React Project: npx create-react-app newsite 2) enter in project: cd newSite 3) Install web3: npm i web3 4) Import web3 in App.js: import Web3 from 'web3';

Web3.js Version

1.6.0

Environment

Operating System: MacOS Monterey Macbook Pro 16" M1 Pro
Browser: Brave
Node.js Version: v16.13.0
NPM Version: 8.1.0

Anything Else?

No response

web3 / web3.js

Web3 don't work with latest of React #4659