How to install Polyfills with Webpack 5

For Webpack 5 users, who have not installed polyfills in their projects there's an additional step that needs to be done in order to use social authentication. This step is required by the web3auth library, AsteroidKit uses that. The following guide describes how to install the necessary packages.

React Guide

This issue is caused due to the fact that the web3.js and ethers.js packages have certain dependencies, which are not present within the browser environment by webpack 5. Hence, you require certain node polyfills to be added to your project, while overriding the configurations to enable their usage. When that is done, your project should be able to utilize the web3.js and ethers.js packages easily without any issues.

create-react-app​

If you are using create-react-app version >= 5 you may run into issues building. The issue can be resolved following the instructions below:

Solution​

• Install react-app-rewired and the missing modules in your application

• npm

• Yarn

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

• Create config-overrides.js in the root of your project folder with the content:

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"],
    }),
  ]);
  config.ignoreWarnings = [/Failed to parse source map/];
  config.module.rules.push({
    test: /\.(js|mjs|jsx)$/,
    enforce: "pre",
    loader: require.resolve("source-map-loader"),
    resolve: {
      fullySpecified: false,
    },
  });
  return config;
};

• Within package.json change the scripts field for a start, build and test. Instead of react-scripts replace it with react-app-rewired

Before the change:

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

After the change:

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

The missing Nodejs polyfills should be included now and your app should be functional with web3.

• If you want to hide the warnings created by the console:

In config-overrides.js within the override function, add:

config.ignoreWarnings = [/Failed to parse source map/];

If you're using craco, similar changes need to be made to craco.config.js

The original article can be found here:

https://web3auth.io/docs/troubleshooting/webpack-issues