Developer Relations at Alchemy

How to polyfill node core modules in webpack 5

March 17, 2022

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:

-- CODE language-js line-numbers -- 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:

-- CODE language-js line-numbers -- yarn add --dev react-app-rewired

Install react-app-rewired package with npm:

-- CODE language-js line-numbers -- npm install --save-dev react-app-rewired

2. 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:

-- CODE language-js line-numbers -- npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

3. 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:

-- CODE language-js line-numbers -- 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:

-- CODE language-js line-numbers -- "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:

-- CODE language-js line-numbers -- "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.