Troubleshooting Create React App

If you're using a framework like Create React App and are running into build errors, check out some common errors and how to resolve them.

Missing Polyfills (Webpack 5)

Since Create React App uses Webpack 5, you may encounter errors 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:

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

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:

{
    ...,
    "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.

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:

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!