How to set up web3.js with React 18 and Webpack5 without errors

Why this error occurs?

1. http 
2. stream
3. crypto
4. assert
5. https
6. url
7. os
Module not found: Error: Can't resolve 'stream' in ./project-path
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 }
Module not found: Error: Can't resolve 'crypto' in ./project-path
ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 71:31-48
yarn add -D react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"assert": require.resolve("assert"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"os": require.resolve("os-browserify"),
"url": require.resolve("url")
})
config.resolve.fallback = fallback;
return config;
}
import { Buffer } from 'buffer';

window.global = window;
global.Buffer = Buffer;
global.process = {
env: { DEBUG: undefined },
version: '',
nextTick: require('next-tick')
};
"start": "react-scripts start" // existing
"start": "react-app-rewired start" // use this one
WARNING in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/xhr2-cookies/xml-http-request.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/xml-http-request.ts'
Failed to parse source map from '/node_modules/xhr2-cookies/xml-http-request-upload.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/xhr2-cookies/xml-http-request-upload.ts'
config.ignoreWarnings = [/Failed to parse source map/]
// final version of the file
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"assert": require.resolve("assert"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"os": require.resolve("os-browserify"),
"url": require.resolve("url")
})
config.resolve.fallback = fallback;
config.ignoreWarnings = [/Failed to parse source map/];
return config;
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ali Raza

Ali Raza

A full-time developer sharing the content to help build quality software. More @ https://www.linkedin.com/in/thealiraza/ https://twitter.com/indietechlead