How to polyfill node core modules in webpack 5
Author: Vitto Rivabella
In this tutorial, you’ll learn how to polyfill node core modules in webpack version 5 and above using the react-app-rewired package, installing the required dependencies, and overriding the default webpack configuration.
What causes the Polyfill node core module error?
Until the latest update to webpack version ___, webpack < 5 used to include NodeJS polyfills by default. Because the current version of webpack no longer includes NodeJS polyfills by default, it is causing issues for developers that use create-react-app with webpack > 5 to build applications with the web3.js and alchemyweb3.js library.
Here’s what the polyfill node core module error looks like:
BREAKING CHANGE: webpack<5 used to include polyfills for node.js core modules by default.4 easy steps to fix polyfill node core modules in webpack 5
The main issue with create-react-app and the polyfill error is that create-react-app, by default, hides the webpack config file inside the node-modules, and by doing so, generates the file at build time leaving developers unable to modify it.
Luckily there is a package, react-app-rewired, that allows developers to easily edit the webpack config file and fix the polyfill node core module error.
1. Install react-app-rewired
First, install the reach-app-rewired package with your preferred package manager.
Install react-app-rewired package with yarn:
yarn add --dev react-app-rewiredInstall react-app-rewired package with npm:
npm install --save-dev react-app-rewired2. Install missing dependencies
Next, install these missing dependencies:
crypto-browserify
stream-browserify
assert
stream-http
https-browserify
os-browserify
url
Install missing dependencies with yarn:
yarn add process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer
Install missing dependencies with npm:
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process3. Override the create-react-app webpack config file
In the root folder of your project, create a new file called config-overrides.js, and add the following code to it:
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; }This config-overrides.js code snippet is telling webpack how to resolve the missing dependencies that are needed to support web3 libraries and wallet providers in the browser.
4. Override package.json to include the webpack configuration
Within the package.json file, replace react-scripts with react-app-rewired scripts for the three following scripts fields to update the webpack configuration:
start
build
test
Here’s what the package.json file looks like before replacing the react-scripts:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},Here’s the package.json file after replacing the react-scripts with react-app-rewired scripts:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},That’s it!
Now, the polyfill node core module error should be fixed, missing NodeJS polyfills should be included in your app, and your app should work with the web3.js and Alchemyweb3.js library.
Alchemy Newsletter
Be the first to know about releases
Related articles
Priority Blockspace for Humans on World Chain: Mainnet-Ready with Alchemy
World Chain launches Priority Blockspace for Humans. Verified humans now get priority transactions over bots. Deep dive into the technical implementation and collaboration behind this milestone.
Custom Gas Tokens: How to Use ERC-20 Tokens for Transaction Fees
Learn how Custom Gas Tokens let users pay transaction fees with your ERC-20 token instead of ETH. Complete guide covering implementation approaches, economic considerations, and real-world case studies.
What Is the Ethereum Pectra Upgrade? Dev Guide to 11 EIPs
The Ethereum Pectra upgrade bundles 11 EIPs, from smart wallet capabilities to staking mechanics and rollup data efficiency. Discover what changes and why it matters.