How do I address this webpack 5 issue with polyfills?

Question

If I merely add next js to a boiler-plate Visual-Studio-2022 React JS application I start getting errors. Specifically, after creating the project in the wizard (and verifying it runs), if I then do this in the terminal

npm i next

And then add the following lines to my App.js

import Image from 'next/image';
import Link from 'next/link';

Then I started getting this error

ERROR in ./node_modules/next/dist/compiled/micromatch/index.js 2858:18-33
Module not found: Error: Can't resolve 'path' in 'C:\Users\jmole\source\repos\Main\Mobile\MyConpany\Applications\MyCompany.Mini\ClientApp\node_modules\next\dist\compiled\micromatch'

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 }

My main problem is that I do not know where to put the changes it recommends. It doesn't tell you where.

I read this post that says I am supposed to edit webpack.config.js but I find 3 instances of that file under my node_modules subdirectory. And I cannot edit for the same reason that the author of that post cannot: It will be regenerated.

The responder then suggests using patch-package to dynamically apply the change. and I can install that all right but even after reading the readme.md, I still do not understand what I am supposed to do nor do I understand which version of webpack.config.js I am supposed to patch.

Can anyone give me any guidance here?

Edited to add:

• The only code in this entire app that I can see referring to the 'path' module is a couple of scripts that Visual Studio automatically adds to any such app. They are called aspnetcore-https.js and aspnetcore-react.js. They initialize HTTPS certificates for the app and proxy and worked fine until I started adding other packages via npm i. They do not import the path module. They require it. For example, here is some of the boiler-plate code from one of them.

// This script sets up HTTPS for the application using the ASP.NET Core HTTPS certificate
const fs = require('fs');
const spawn = require('child_process').spawn;
const path = require('path');

Answer 1

warning: depending on version results May Vary.

If webpack.config.js is present in the root directory:

You should not edit the webpack.config.js file inside the node_modules directory, as those changes will be overwritten when you update dependencies. Instead, you need to find the webpack.config.js file in your projects root directory. You have three options to choose from.
Option 1: Include a Polyfill for the "path" Module.

npm install path-browserify

webpack.config.js

module.exports = {
  // Your existing webpack config options...

  resolve: {
    fallback: {
      "path": require.resolve("path-browserify"),
      // Add other polyfills for node.js core modules if needed...
    },
  },

  // Other webpack config options...
}

Option 2: Use an empty module as a fallback. When you are confident that your code will only run in environments that support the "path" module or your application does not genuinely rely on the functionality provided by the "path" or there is no need to include a polyfill for it.

module.exports = {
  // Your other webpack configurations...

  resolve: {
    fallback: {
      "path": false
    }
  }
}

Option 3: Using a Plugin You can add support for Node.js core modules with node-polyfill-webpack-plugin

npm install node-polyfill-webpack-plugin

update your webpack.config.js

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

If webpack.config.js is not present in the root directory:

if for some reason (CRA, Next and so on..) webpack.config.js is not present in your project's root directory, install the polyfill

npm install path-browserify

In the file/files where you use the "path" module, add the following import statement at the beginning of the file:

import "path-browserify" // Import the polyfill first
import path from 'path' // Then import the 'path' module

overrides approach

warning: I haven't tested.
In case of Create React App (CRA), you can also use the "overrides" field in the package.json to customize the webpack configuration.(from CRA version 4)

npm install path-browserify

package.json

//Look for the "overrides" field. If it doesn't exist, create it.
"overrides": {
  "webpack": {
    "resolve": {
      "fallback": {
        "path": require.resolve("path-browserify")
      }
    }
  }
}

patch-package approach

install "patch-package" as a dev dependency

npm install patch-package --save-dev

Identify the package/packages that are causing the issus then install relevant polyfills. In this case the issue seems to be related to the "path" module. Since the error suggests using "path-browserify" install it.

npm install path-browserify

Open the file that is causing the error, and at the beginning of the file, add the following import statements:

import "path-browserify" // Import the polyfill first
import path from 'path' // Then import the 'path' module

Once you've made the change, create a patch for the modified package using "patch-package". Run the following command

npx patch-package package-name

Replace "package-name" with the name of the package that is causing the polyfill issue. If the package name is not clear from the error message, you can check the package.json file to identify the package. This command will create a "patches" directory in your project. Inside this directory, you'll find a new patch file named something like "example-package+version.patch". Open the patch file with an editor to verify that it contains the changes you made.
To apply the patch and make the changes to the package, run following command

npx patch-package

Follow Github Issue

There's a CRA github open issue in this link. Some interesting solutions could be found here that might work for you.