Webpack构建突然失败：react-dev-utils相关TypeError问题求助

核心原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'indexOf')是因为Node.js版本与旧版react-dev-utils不兼容。当前使用的Node.js v20.19.2属于较新版本，而react-dev-utils@12.0.1是为Node.js 14/16设计的，在Node v20环境下，webpack依赖的enhanced-resolve模块返回的请求对象中descriptionFileRoot属性未被正确初始化，导致调用indexOf时触发错误。后续的RpcIpcMessagePortClosedError是第一个错误引发的连锁问题，解决前者后后者会自动消失。

解决方案 #

方案1：回退Node.js版本到兼容版本 #

若无需使用Node v20，直接切换到与react-dev-utils@12.0.1兼容的Node.js版本（推荐16.x或18.x）：

• 用nvm管理版本：

  # 安装Node.js 18.x
  nvm install 18
  # 切换到18.x版本
  nvm use 18
  

• 重新启动项目：npm start

方案2：修复ModuleScopePlugin代码并持久化补丁 #

项目已eject，可直接修复react-dev-utils中的问题代码，并用patch-package保存修改，避免下次npm install丢失：

1. 安装patch-package：

   npm install patch-package --save-dev
   

2. 打开node_modules/react-dev-utils/ModuleScopePlugin.js，找到第32行：

   request.descriptionFileRoot.indexOf('/node_modules/') !== -1 ||
   

   修改为：

   (request.descriptionFileRoot && request.descriptionFileRoot.indexOf('/node_modules/') !== -1) ||
   

3. 生成补丁文件：

   npx patch-package react-dev-utils
   

   项目根目录会生成patches/react-dev-utils+12.0.1.patch文件，后续执行npm install时会自动应用该补丁。
4. 重新启动项目：npm start

方案3：升级react-dev-utils到兼容版本（谨慎操作） #

尝试升级react-dev-utils到支持Node v20的版本，但需注意eject后的项目依赖关联性强，可能需要调整其他配置：

1. 修改package.json中react-dev-utils的版本为^12.0.2或更高（需确认版本兼容性）：

   "react-dev-utils": "^12.0.2"
   

2. 重新安装依赖：

   npm install --legacy-peer-deps
   

3. 检查webpack配置是否有冲突，手动调整后启动项目。

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