VS2022 React项目引入Next.js后Webpack 5 polyfill配置求助

操作过程 #

• 通过VS2022向导创建React JS模板项目，确认能正常运行
• 终端执行npm i next安装Next.js
• 在App.js中添加两行导入代码：

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

• 运行项目后触发报错：

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 }

核心困惑 #

不知道该把webpack的resolve.fallback配置修改放在哪里：

• 查资料说要改webpack.config.js，但node_modules目录下有3个该文件，修改后会被重新生成，无法持久化
• 尝试用patch-package，但不清楚具体操作流程，也不知道该修补哪个文件

补充信息 #

项目里只有VS自动生成的aspnetcore-https.js和aspnetcore-react.js脚本用require引入了path模块，之前运行完全正常，直到安装Next.js后才出问题。

1. 别碰node_modules里的webpack配置 #

node_modules里的文件是依赖包自动生成的，修改后会被npm覆盖，完全没必要浪费时间在这上面。

2. 在项目根目录自定义webpack配置（推荐） #

VS2022的React模板用的是react-scripts，可以通过craco工具扩展配置，不用动原生文件：

步骤： #

• 安装craco：

  npm install @craco/craco --save-dev
  

• 在项目根目录新建craco.config.js，写入配置：

  const path = require('path');
  
  module.exports = {
    webpack: {
      configure: {
        resolve: {
          fallback: {
            "path": require.resolve("path-browserify")
          }
        }
      }
    }
  };
  

• 安装path-browserify：

  npm install path-browserify --save
  

• 修改package.json里的启动脚本，把react-scripts替换成craco：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

• 重启项目即可生效。

备选方案：eject暴露webpack配置（不推荐，不可逆） #

如果不想用craco，可以执行npm run eject把webpack配置暴露到项目根目录，然后直接修改根目录下的webpack.config.js：

• 执行命令：

  npm run eject
  

• 在生成的webpack.config.js里找到resolve.fallback（没有就手动加），添加：

  resolve: {
    fallback: {
      "path": require.resolve("path-browserify")
    }
  }
  

• 安装path-browserify后重启项目。

3. patch-package用法（可选） #

如果一定要用这个工具，步骤如下：

• 安装patch-package：

  npm install patch-package --save-dev
  

• 找到node_modules里react-scripts/config/webpack.config.js文件，添加resolve.fallback配置
• 执行命令生成补丁：

  npx patch-package react-scripts
  

• 之后每次npm install后，补丁会自动应用，但依赖包更新后可能失效，不如craco灵活。

内容的提问来源于stack exchange，提问作者Joe