Fix the "BREAKING CHANGE: webpack < 5 used to include polyfills for node.js" error in React
In this guide, we are going to learn how to fix the "BREAKING CHANGE: webpack < 5 used to include polyfills for node.js" error in Web3 JS.
In this guide, we are going to learn how to resolve the "BREAKING CHANGE: webpack < 5 used to include polyfills for node.js" error in React.
We’ll learn how to add the polyfills to the node core modules in webpack version 5 and above using the react-app-rewired package.
We'll install all the required dependencies, and override the default webpack configuration.
What is that error and why does it happen?
The error is that webpack versions under 5 used to include NodeJS polyfills by default. Webpack 5 and above don't include that so some libraries like Wagmi or Solana Web3.js generate errors.
The error looks like this:
BREAKING CHANGE: webpack<5 used to include polyfills for node.js core modules by default.
And above that line, there is a "module not found" error.
How to fix the error?
To fix the error, you need to install all the missing dependencies manually and install react react-app-rewired to run your app.
To install everything using yarn, run this command:
yarn add --dev react-app-rewired process crypto-browserify stream browserify assert stream-http https-browserify os-browserify url buffer
And using npm:
npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
Next, you need to create a config-overrides.js
file in the root of your project folder with this content:
const webpack = require('webpack');
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.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
})
])
return config;
}
That will tell webpack how to find the missing modules.
Next, in your package.json
file, you need to use react-app-rewired
instead of react-scripts
:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
Now your app doesn't crash anymore but you may have a bunch of warnings.
To hide the warnings, inside the override
function of the config-overrides.js
file, put this line:
config.ignoreWarnings = [/Failed to parse source map/];
This basically just tells your app to ignore these warnings which will hide them.
Otherwise, you can also set the GENERATE_SOURCEMAP
environment variable to false
. To do that, you can either add this line in the .env
file of your app (which should be at the root of the project):
GENERATE_SOURCEMAP=false
Or you can also set that environment variable right when you run the start script. To do that, update the start
script in the package.json
file and add GENERATE_SOURCEMAP=false
before the command that starts the app:
"scripts": {
"start": "GENERATE_SOURCEMAP=false react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
I personally prefer the first option but it's up to you!
And that's it! 🎉
Thank you for reading this article