as webpack grows in size, they removed the polyfills in webpack5. Looks like you are using create-react-app (CRA) and webpack configuration is not exposed to the user in CRA. you can expose it using eject. you might have this script in package.json:

   "eject": "react-scripts eject"

so run npm run eject. This is not recommended because it means that you will no longer benefit from the updates of CRA.

you can handle ejecting with either rewire or craco.

After you get the webpack configuration, you need to add resolve property to webpack config and install all those required packages :

resolve: {

    extensions: [".js", ".css"],

    alias: {

      // add as many aliases as you like!

      // optional

      components: path.resolve(__dirname, "src/components"),

    },

    fallback: {

      // path: require.resolve("path-browserify"),

      fs: false,

      assert: require.resolve("assert/"),

      os: require.resolve("os-browserify/browser"),

      constants: require.resolve("constants-browserify"),

      stream: require.resolve("stream-browserify"),

      crypto: require.resolve("crypto-browserify"),

      http: require.resolve("stream-http"),

      https: require.resolve("https-browserify"),

    },

  },

I have webpac5 Boilerplate. you can use it if you want:

• Since there are too many polyfills, instead of manually installing all, you can use node-polyfill-webpack-plugin package. instead of fallback property

  
  

   const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
  
  
  
  plugins: [
  
    new HtmlWebpackPlugin({
  
      title: "esBUild",
  
      template: "src/index.html",
  
    }),
  
    // instead of fallback
  
    new NodePolyfillPlugin(),
  
  
  
    new webpack.ProvidePlugin({
  
      process: "process/browser",
  
      Buffer: ["buffer", "Buffer"],
  
      React: "react",
  
    }),
  
  ],
  
  

  
  

webpack5 boilerplate github repo