React + Vite项目遇Invalid Hooks错误：多版本React怎么解决？

1. 找出所有嵌套依赖里的React版本 #

先执行命令查看完整依赖树，定位带冲突版本的包：

# npm用户
npm list react
# pnpm用户
pnpm list react
# yarn用户
yarn list react

执行后会列出所有依赖（包括间接依赖）里的React版本，就能看到哪个包偷偷引入了不同版本的React。

2. 强制所有依赖用统一的React版本 #

根据你的包管理器，在package.json里添加配置强制统一版本：

• npm/yarn：
  在package.json中加入：

"resolutions": {
  "react": "^18.2.0", // 替换成你依赖列表里的React版本
  "react-dom": "^18.2.0"
}

然后重新安装依赖：

npm install
# 或者 yarn install

• pnpm：
  在package.json中加入：

"pnpm": {
  "overrides": {
    "react": "^18.2.0", // 替换成你依赖列表里的React版本
    "react-dom": "^18.2.0"
  }
}

然后执行：

pnpm install

3. 清理缓存+重装依赖 #

缓存可能残留旧版本，彻底清理后重装：

# npm操作
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
npm run dev

# pnpm操作
pnpm store prune
rm -rf node_modules pnpm-lock.yaml
pnpm install
pnpm run dev

# yarn操作
yarn cache clean
rm -rf node_modules yarn.lock
yarn install
yarn dev

4. 给Vite加别名强制指向根目录React（可选） #

如果前面步骤无效，在vite.config.js里添加别名，确保项目只用你安装的那个版本：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'react': path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom')
    }
  }
})

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