升级ReactJS v16至v18（Node.js 18）时遭遇gyp错误求助

你遇到的错误核心是项目中仍残留 node-sass 相关依赖，且 Node.js 18 与 node-sass 完全不兼容（node-sass 已停止维护，仅支持到 Node.js 16）。以下是彻底解决步骤：

1. 彻底清理 node-sass 及旧依赖 #

• 卸载 node-sass：

  npm uninstall node-sass
  # 用 yarn 的话执行：yarn remove node-sass
  

• 检查 package.json，删除所有与 node-sass 绑定的旧依赖（比如版本低于 10 的 sass-loader，旧版 sass-loader 强制依赖 node-sass）
• 安装兼容的 sass 和 sass-loader：

  npm install sass sass-loader@^10
  # 若使用 webpack 5，可直接安装最新版 sass-loader：npm install sass sass-loader
  

2. 清理依赖缓存与目录 #

• 删除本地依赖目录和锁文件：

  rm -rf node_modules
  rm package-lock.json yarn.lock
  

• 重新安装所有依赖：

  npm install
  

3. 修复 Mac 系统下 node-gyp 的环境问题 #

• 安装 Xcode 命令行工具（node-gyp 编译需要）：

  xcode-select --install
  

• 确保 Node.js 使用 Python 3.x（node-gyp 不再支持 Python 2）：

  npm config set python /usr/bin/python3
  

4. 确保 React 18 相关依赖到位 #

• 升级核心 React 包：

  npm install react@^18 react-dom@^18
  

• 若为 Create React App 项目，升级 react-scripts 到兼容版本：

  npm install react-scripts@^5
  

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