Vite构建报错：两个输出文件路径相同但内容不同（React.js）

以下是针对该问题的排查和解决步骤：

• 清理缓存与依赖
  先彻底清理Vite缓存和项目依赖，避免缓存或损坏的依赖文件导致冲突：

  # Windows系统
  rmdir /s /q node_modules .vite
  del package-lock.json yarn.lock
  npm install
  
  # macOS/Linux系统
  rm -rf node_modules .vite package-lock.json yarn.lock
  npm install
  

• 检查并统一React依赖版本
  项目中可能存在多版本React依赖，导致构建时生成冲突的文件：

  1. 执行命令查看React依赖树：

     npm ls react
     

  2. 如果发现多个版本的React，在package.json中添加overrides字段强制统一版本：

     "overrides": {
       "react": "$react",
       "react-dom": "$react-dom"
     }
     

  3. 重新安装依赖：npm install

• 排查路由配置中的导入问题
  检查路由相关组件的导入语句：

  • 确保没有误导入本地同名文件（比如import React from './React'这类错误）
  • 检查文件名大小写：Windows系统文件名不区分大小写，但Vite构建时会严格识别，确保导入路径的大小写和实际文件一致

• 检查Vite配置是否存在路径冲突
  打开vite.config.js，确认别名配置是否正确，避免别名指向了错误的React依赖路径，或者存在重复的别名规则导致路径解析冲突

• 调整Vite版本
  部分版本的Vite/esbuild存在依赖处理的bug，尝试切换到稳定版本：

  # 降级到指定稳定版
  npm install vite@^4.4.5
  
  # 或升级到最新稳定版
  npm install vite@latest
  

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