Does not work with Create-react-app template with react 18 and webpack 5 (react-script 5.0)

[davidvn001]

Error:

webpack 5 no longer do auto-polyfilling for node core modules

https://i.stack.imgur.com/SpjFk.png

[GantMan]

Gotcha - I'll have to look into this. Thanks!

[arifszn]

I was able to reproduce the error in CRA 5. However, in stackblitz with the same dependencies (React 18 and react-script 5.0), it did not throw any error.

https://stackblitz.com/edit/react-c4416f

[DavidPaf]

@arifszn

I download your linked project locally Windows and 'npm install', then the same error message appear Not sure the difference in stackblitz and local installation though I just download => extracted and run npm install

[GantMan]

Just a heads up - I'm going on vacation in a few days, so I'll try to get around to figuring out how to help fix this, but if someone is dedicated to the cause and willing to do upgrades/PRs to get us there, please let me know. I've got significant distractions from OSS this week.

[httpjamesm]

I have found a solution. I used craco instead of react-scripts to deploy my app and overrode the webpack configuration with craco.config.js.

My craco.config.js file is as follows:

const webpack = require("webpack");

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
          path: require.resolve("path-browserify"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
};

The following must be installed: yarn add process browserify-zlib stream-browserify util buffer assert path-browserify

[Melak12]

Based on @httpjamesm 's solution, I have come up with another solution using react-app-rewired. The benefit to use this rather than craco is to get the advantage of the latest react and tailwindcss versions.

First, install react-app-rewired npm i react-app-rewired

Add config-overrides.js and inside it:

const webpack = require("webpack");

module.exports = function override(config, env) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        process: require.resolve("process/browser"),
        zlib: require.resolve("browserify-zlib"),
        stream: require.resolve("stream-browserify"),
        util: require.resolve("util"),
        buffer: require.resolve("buffer"),
        asset: require.resolve("assert"),
        path: require.resolve("path-browserify"),

    });

    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])

    return config;
}

Change the scripts inside package.json

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

Don't forget to install these: npm i process browserify-zlib stream-browserify util buffer assert path-browserify