Vite+React项目Fast Refresh失效求助：React DevTools全局钩子被垫片

问题原因 #

浏览器中的React DevTools扩展或第三方库（如Capacitor）修改了全局变量__REACT_DEVTOOLS_GLOBAL_HOOK__，导致Vite的Fast Refresh功能与该垫片冲突，被强制禁用。

解决方案 #

• 禁用/更新React DevTools扩展
  打开浏览器扩展管理面板，找到React DevTools：

  1. 先临时禁用该扩展，重启浏览器后重新运行npm run dev，验证热重载是否恢复。
  2. 如果禁用后正常，说明是扩展版本不兼容，尝试将扩展更新到最新版，或回退到与当前React 18.x兼容的稳定版本。

• 排查Capacitor库的影响
  从你的依赖列表看，项目引入了Capacitor跨平台工具链，这类库可能在开发环境注入全局钩子：

  1. 临时移除package.json中所有Capacitor相关依赖（先备份文件），执行npm install后重启项目，观察问题是否消失。
  2. 若确认是Capacitor导致，尝试将其更新到最新兼容版本，或在Vite配置中添加规则，阻止其在开发环境加载相关钩子代码。

• 重置依赖与Vite缓存

  1. 删除项目根目录下的node_modules、package-lock.json文件。
  2. 执行npm install重新安装依赖。
  3. 执行npx vite --clear-cache清除Vite缓存，再启动开发服务器。

• 强制开启Fast Refresh（临时方案）
  在vite.config.js中修改React插件配置，强制启用Fast Refresh并可选禁用DevTools检测：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [
      react({
        fastRefresh: true,
        devTools: false // 禁用DevTools检测，可能影响React DevTools使用
      })
    ]
  })
  

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