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 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