Webpack 5 Receiving a Polyfill Error?!?! My JavaScript React project is receiving a polyfill error while trying to compile my webpack.config.js file

Question

I am taking a course on Udemy (it is Brad Schiff's React for the Rest of Us course here) that is based on React and I am receiving an error related to webpack which is keeping it from compiling.

I am getting the following error as I am trying to compile my webpack file from a Udemy course I am taking... here is a picture of the error I am receiving on my terminal: please view it here

Here is the text of the error but please view the link for more details as a screenshot nonetheless:

Module not found: Error: Can't resolve 'path' in '/Users/seanmodd/Development/2021/BradSchiff/Frontend/node_modules/webpack/lib/util'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./node_modules/webpack/lib/CleanPlugin.js 12:17-37
@ ./node_modules/webpack/lib/index.js 115:9-33
@ ./node_modules/dotenv-webpack/dist/index.js 12:15-33
@ ./node_modules/dotenv-webpack/browser.js 1:13-38
@ ./app/components/HomeGuest.js 5:15-40
@ ./app/Main.js 8:0-47 38:96-105

Dudleyduds

Answer 1

They have removed automatic polyfills in webpack 5. We have to include them ourselves. More info here

Atalanti

Answer 2

Run npm install node-polyfill-webpack-plugin in your terminal`

go to your webpack.config.js and paste this:

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
// Other rules like entry, output, devserver....,
plugins: [
    new NodePolyfillPlugin()
]}

this should fix it, they removed automatic polyfills in webpack 5 that's why downgrading web3 version will fix it too

Situla

Answer 3

By looking at the error stack, we see that ./app/components/HomeGuest.js line 15 requires the path module.

If you really need the path module on the client side, you have to add this in the webpack config file:

module.exports = {
  // ... your config
  resolve: {
    fallback: {
      path: require.resolve("path-browserify")
    }
  }
}

And also, install the path-browserify module (npm install path-browserify).

However, you may not need this module on the client side, and then the fix is to edit the HomeGuest.js file line 15 in such a way that the path module is not required.

Quasimodo

Answer 4

1. npm install react-app-rewired

2. install the polyfill mentioned, in your case path-browserify

3. create an config-overrides.js file: and paste the below:

const webpack = require("webpack");
module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    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;
};

4. In package.json, change the scripts as below: "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" },

By following these steps, and finally do npm start, the issue will be resolved.

Cronin

Answer 5

It would be best if you did this: npm install react-app-rewired

then install the polyfill mentioned, in your case path-browserify just like:

1. npm install path-browserify
2. npm install os-browserify
3. npm install stream-browserify
4. npm install crypto-browserify
5. npm install vm-browserify
6. npm install process
7. npm install dotenv

create a config-overrides.js file in the root directory of your project in the frontend part: and paste the below: [

const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};

  Object.assign(fallback, {
    fs: false,
    path: require.resolve("path-browserify"),
    os: require.resolve("os-browserify/browser"),
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    vm: require.resolve("vm-browserify"),
  });

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

  return config;
};

]1

After this, you need to change the script of your package.json file just like this:

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

after that you have to start your project by npm start not like this npm react-app-rewired start

I think you can tackle your problem efficiently by following these steps.

Vyner