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:
{
...,
"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:
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!
Still have questions? Reach out to [email protected] – we're here to help!