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

Answer 1

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

Answer 2

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.