React项目突发fs/path模块无法解析编译错误，求排查解决方法

问题描述 #

开发React项目时突然出现编译错误，报错信息如下：

Module not found: Error: Can't resolve 'fs'

Module not found: Error: Can't resolve 'path'

项目此前运行完全正常，仅对某一组件做了小幅修改后就触发该报错；即使回滚到最近可正常运行的Git提交版本，问题依然存在。

已尝试的无效操作 #

• 删除node_modules文件夹与package-lock.json文件，清理npm缓存后重新执行npm i
• 回滚到历史可正常运行的代码提交版本

问题原因推测 #

近期有大量开发者遇到同类问题，即使未主动更新项目依赖或配置，也可能由以下原因导致：

• 依赖链隐性更新：npm/yarn的依赖缓存机制或次级依赖的自动更新，可能导致Babel相关工具的版本发生变动，引发浏览器环境下对Node.js核心模块（fs/path）的解析异常——这类模块原本仅适用于Node.js环境，正常情况下React项目编译时会被排除。
• Babel关键插件缺失：项目依赖的Babel工具链中，@babel/plugin-proposal-private-property-in-object这类插件可能因次级依赖更新被意外移除或版本不兼容，进而触发编译流程中的模块解析错误。

有效解决方法 #

在项目的package.json文件的devDependencies中手动添加指定版本的Babel插件：

"devDependencies": {
  // 保留原有依赖，新增以下内容
  "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
}

添加完成后执行npm install重新安装依赖，即可解决该编译报错问题。

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