How to polyfill node core modules in webpack 5
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.
Related articles
Preparing for the Agave 2.0 Upgrade
ERC-1271 Signature Replay Vulnerability
On October 27th 2023, Alchemy discovered a ERC1271 contract signature replay vulnerability that affected a large number of smart contract accounts (SCA), and led to risks when interacting with several applications.
What is RIP-7212? Precompile for secp256r1 Curve Support
RIP-7212 is a core change in the Ethereum protocol that opens up a way to have cheap, secure, and fast P256 curve verification with a precompiled contract.
