Vite 2.9.1启动报错：react/index.js元数据不一致问题求助

问题场景 #

使用Vite 2.9.1搭建的React项目，更新后启动开发服务器时触发如下报错：

X [ERROR] [plugin vite:dep-pre-bundle] Detected inconsistent metadata for the path "node_modules/react/index.js" when it was imported here:

  node_modules/react/cjs/react-jsx-dev-runtime.development.js:16:20:
    16 │ var React = require('react');
       ╵                     ~~~~~~~

The original metadata for that path comes from when it was imported here:

  dep:react:1:23:
    1 │ export default require("./node_modules/react/index.js");
      ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The difference in metadata is displayed below:
 
 {
-  "pluginName": null,
+  "pluginName": "vite:dep-pre-bundle",
 }

当前系统及依赖信息：

System:
    OS: macOS 12.2.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7600 CPU @ 3.50GHz
    Memory: 426.07 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.9.0 - /usr/local/bin/node
    Yarn: 1.22.17 - ~/.config/yarn/global/node_modules/.bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 100.0.4896.75
    Edge: 100.0.1185.39
    Safari: 15.3
  npmPackages:
    @vitejs/plugin-vue: ^2.3.0 => 2.3.1 
    vite: 2.9.1 => 2.9.1

解决方案 #

• 强制清除Vite预构建缓存
  执行命令强制重新构建依赖：

  npx vite --force
  

  或手动删除项目根目录下的node_modules/.vite文件夹后重启开发服务器。

• 修正项目插件配置
  你的项目是React类型，但安装了Vue的Vite插件，这会导致插件冲突。执行以下命令替换插件：

  npm uninstall @vitejs/plugin-vue
  npm install @vitejs/plugin-react --save-dev
  

  同时修改vite.config.js，确保启用React插件：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()]
  })
  

• 重新安装依赖
  删除依赖文件夹和锁文件，重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

  若使用Yarn则执行：

  rm -rf node_modules yarn.lock && yarn install
  

• 升级Vite版本
  Vite 2.9.1存在该已知问题，升级到同分支稳定版本或更高主版本可解决：

  # 升级到2.x分支稳定版
  npm install vite@^2.9.16 --save-dev
  # 或升级到3.x版本（注意兼容性）
  npm install vite@^3.2.0 --save-dev
  

内容的提问来源于stack exchange，提问作者Goutham J.M