0%
HomeBlogTechnical
How to polyfill node core modules in webpack 5

How to polyfill node core modules in webpack 5


Published on March 17, 20222 min read

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.

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:

Copied
BREAKING CHANGE: webpack<5 used to include polyfills for node.js core modules by default.

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.

First, install the reach-app-rewired package with your preferred package manager.

Install react-app-rewired package with yarn:

Copied
yarn add --dev react-app-rewired

Install react-app-rewired package with npm:

Copied
npm install --save-dev react-app-rewired

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:

Copied
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

In the root folder of your project, create a new file called config-overrides.js, and add the following code to it:

Copied
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.

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:

Copied
"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:

Copied
"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.

Section background image

Build blockchain magic

Alchemy combines the most powerful web3 developer products and tools with resources, community and legendary support.

Get your API key