如何解决Vercel部署中的PostCSS依赖错误及react-scripts缺失问题

1. 修复PostCSS包名问题 #

日志显示npm尝试拉取含大写字母的无效包名postcss-pseudo-className-any-link，但你package.json里的包名postcss-pseudo-class-any-link是正确的，问题出在本地缓存的package-lock.json。按以下步骤处理：

• 删除本地的package-lock.json文件和node_modules文件夹
• 清理package.json里重复的依赖：将dependencies中的postcss和postcss-pseudo-class-any-link移除，只保留在devDependencies中（PostCSS工具属于开发依赖）
• 重新执行npm install生成正确的锁文件
• 提交更新后的package.json和新的package-lock.json到代码仓库

修改后的package.json依赖部分示例：

"dependencies": {
  "@babel/plugin-syntax-flow": "^7.18.6",
  "@fortawesome/fontawesome-free": "^6.2.0",
  "@fortawesome/fontawesome-svg-core": "^6.2.0",
  "@fortawesome/free-regular-svg-icons": "^6.2.0",
  "@fortawesome/free-solid-svg-icons": "^6.2.0",
  "@fortawesome/react-fontawesome": "^0.2.0",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^14.4.3",
  "css-select": "^5.1.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-icons": "^4.4.0",
  "react-router-dom": "^6.4.2",
  "react-scripts": "5.0.0",
  "react-validation": "^3.0.7",
  "uuidv4": "^6.2.13",
  "web-vitals": "^3.0.3"
},
"devDependencies": {
  "postcss": "^8.4.17",
  "postcss-pseudo-class-any-link": "^7.1.6",
  "sass": "^1.55.0"
}

2. 解决react-scripts: command not found错误 #

该错误源于依赖未正确安装，完成上述步骤后，补充以下操作：

• 清除部署平台（如Vercel）的缓存，重新触发部署
• 若平台默认构建逻辑未自动安装依赖，可在部署设置中将构建命令改为：

npm install && npm run build

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