回滚Next.js依赖后触发TypeScript依赖缺失报错求助

背景 #

原项目可正常运行，依赖配置如下：

"dependencies": {
  "next": "10.2.3",
  "react": "17.0.2",
  "react-dom": "17.0.2",
  "swr": "^0.5.6"
},
"devDependencies": {
  "@types/react": "^17.0.9",
  "autoprefixer": "^10.2.6",
  "deepmerge": "^4.2.2",
  "postcss": "^8.3.5",
  "postcss-cli": "^8.3.1",
  "postcss-nesting": "^8.0.1",
  "prettier": "^2.3.1",
  "tailwindcss": "^2.1.4",
  "typescript": "^4.3.2"
}

曾将Next.js升级至^12.2.2，同步升级React至18版本后出现大量bug，遂回滚旧依赖：恢复原package.json，删除node_modules和package-lock.json，执行npm cache clean --force清理缓存后重新npm install，但项目启动时报错：

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install @types/react by running:

npm install --save-dev @types/react

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

尝试将@types/react版本改为^17.0.2仍报错，先后切换Node.js 16、18、19版本，问题依旧。

解决方案 #

尝试以下步骤排查修复：

• 清理Next.js构建缓存：删除项目根目录下的.next文件夹，回滚依赖后残留的旧构建缓存可能引发版本冲突。
• 验证依赖安装状态：执行npm ls @types/react命令，确认该包是否实际安装到项目中。若未找到，执行npm install --save-dev @types/react@^17.0.9强制重装指定版本。
• 检查tsconfig.json配置：确保tsconfig.json的compilerOptions中jsx字段设为"preserve"（适配Next.js 10的TypeScript规则），且types数组包含"react"，示例片段：

{
  "compilerOptions": {
    "jsx": "preserve",
    "types": ["react"]
  }
}

• 使用npm ci严格安装：npm ci会严格按照package.json的版本安装依赖，避免自动版本解析的不确定性。先执行npm install生成最新package-lock.json，再运行：

npm ci

• 排查全局依赖冲突：执行npm list -g next查看是否全局安装了高版本Next.js，若存在则执行npm uninstall -g next卸载，避免局部项目调用全局依赖。

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