How to polyfill node core modules in webpack

Webpack (<5) used to include NodeJS polyfills by default, this has changed after the upgrade to Webpack 5.

In this tutorial you will learn how to polyfill node core modules in Webpack 5 and above.

You might have run into this error:

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

This error is caused by npm create-react-app, which hides the webpack config file inside node-modules being created only at build time. To fix this, we are using the react-app-rewired package:

Install react-app-rewired package

You can install react-app-rewired package with your package manager

npm i react-app-rewired package

yarn add react-app-rewired package

Install missing dependencies

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

yarn add process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

Create config-overrides.js

In the root folder of your project create config-overrides.js and populate it with this:

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; }

Override package.json

"scripts": { 
	"start": "react-app-rewired start", 
  "build": "react-app-rewired build", 
  "test": "react-app-rewired test", 
  "eject": "react-scripts eject" 
 },

Now your missing NodeJS polyfills should be included in your app and the error will be gone.

🤩 Our Amazing Sponsors 👇