Skip to main content

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!