使用Vite创建React应用后出现Minified React error #321求助

错误本质说明 #

React错误#321对应的是在已卸载的组件中调用了Hook，但你是全新创建且未修改代码的项目，问题大概率出在依赖版本冲突或项目初始化配置异常。

具体排查与修复步骤 #

1. 获取完整错误信息 #

当前报错是压缩后的简化提示，先让Vite以非压缩模式运行，定位具体问题：

• 修改package.json中的dev脚本：

  "scripts": {
    "dev": "vite --mode development",
    "build": "vite build",
    "preview": "vite preview"
  }
  

• 重启npm run dev，查看控制台输出的完整错误栈，确认触发问题的组件或依赖。

2. 修复依赖版本兼容问题 #

从你的package.json来看，安装了react-router-dom、react-redux等额外依赖，可能存在版本不匹配：

• 先清理现有依赖后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 如果问题依旧，尝试调整核心依赖版本：
  部分用户反馈高版本@vitejs/plugin-react与路由依赖存在兼容问题，可尝试降级：

  npm install @vitejs/plugin-react@^2.2.0 vite@^3.2.0 --save-dev
  

  或重新安装Redux相关依赖，确保版本匹配：

  npm uninstall react-redux @reduxjs/toolkit
  npm install react-redux @reduxjs/toolkit
  

3. 验证官方基础模板是否正常 #

默认Vite React/React-TS模板不会自带react-router-dom和Redux依赖，若你创建时使用了第三方模板，可能模板本身存在bug：

• 用官方基础模板重新创建项目测试：

  npm create vite@latest test-app -- --template react-ts
  cd test-app
  npm install
  npm run dev
  

  如果基础模板运行正常，再逐步添加react-router-dom、Redux等依赖，每次添加后启动测试，定位触发问题的依赖。

4. 排除浏览器环境干扰 #

浏览器缓存或第三方扩展可能干扰项目运行：

• 打开浏览器无痕模式访问项目
• 禁用所有浏览器扩展（尤其是React DevTools、广告拦截类工具）后重新测试

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