Handling issues with Webpack 5

If you're using a framework like create-react-app to build your project, you may encounter errors related to Webpack 5, like the one below:

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.

This is because many standard web3 libraries, such as ethers.js, have dependencies that need to be polyfilled into your build environment. Webpack 5 no longer automatically handles these polyfills, which triggers this error.

You can work past these issues by explicitly adding in these dependencies and overriding some configurations, as outlined below:

Step 1: Install dependencies

Run the following command in your project to install the necessary dependencies:

npm i --save-dev react-app-rewired assert buffer process stream-browserify url

Step 2: Configure your project with react-app-rewired

In your package.json, in your start, build, and test scripts, update react-scripts to react-app-rewired. The "scripts" object should look like the following:

In your package.json

{
    ...,
    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject"
    },
    ...
}

This allows you to bypass the default webpack configurations from create-react-app.

Step 3: Add config-overrides.js to your project

Lastly, at the root of your project, create a file called config-overrides.js and paste in the following:

In your config-overrides.js

const webpack = require("webpack");
module.exports = function override(config) {
  config.resolve.fallback = {
    assert: require.resolve("assert"),
    buffer: require.resolve("buffer"),
    "process/browser": require.resolve("process/browser"),
    stream: require.resolve("stream-browserify"),
    url: require.resolve("url"),
    http: false,
    https: false,
    os: false,
  };
  config.plugins.push(
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    })
  );
  config.ignoreWarnings = [/Failed to parse source map/];
  return config;
};

This tells your browser where to look for the dependencies that you've now added.

That's it!

info

Still have questions? Reach out to [email protected] – we're here to help!