使用Flipper调试React Native应用时出现Hermes引擎相关报错求助

核心原因 #

报错本质是react-devtools-core的后端代码错误地在React Native（Hermes引擎）环境中调用了浏览器专属的window.document对象，而Fiber ID找不到的警告则是DevTools与React Native版本不兼容导致的Fiber树同步异常。

可行解决方案 #

1. 对齐依赖版本（优先推荐） #

• 确保react、react-native、react-devtools-core版本相互兼容：
  • 例如React 18.x搭配React Native 0.71+，同时react-devtools-core版本需与react主版本一致
  • 升级Flipper到最新稳定版，同步更新项目中的react-native-flipper依赖到对应兼容版本

2. 临时切换调试工具/禁用DevTools插件 #

• 在Flipper中直接禁用React DevTools插件，改用Chrome DevTools调试：
  启动项目后执行npx react-native start，在终端按d打开调试菜单，选择"Debug with Chrome"
• 若项目中手动集成了DevTools，可临时注释相关初始化代码（如import ReactDevTools from 'react-devtools';这类调用）

3. 临时补丁修复backend.js代码 #

找到node_modules/react-devtools-core/dist/backend.js中的initialize函数，添加环境判断逻辑，避免在RN环境执行浏览器专属代码：

function initialize() {
  // 新增：仅在存在document对象的环境中执行
  if (typeof window?.document !== 'undefined') {
    canvas = window.document.createElement('canvas');
    canvas.style.cssText = "\n xx-background-color: red;\n xx-opacity: 0.5;\n bottom: 0;\n left: 0;\n pointer-events: none;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 1000000000;\n ";
    var root = window.document.documentElement;
    root.insertBefore(canvas, root.firstChild);
  }
}

注意：修改node_modules文件是临时方案，建议用patch-package工具将该修改固化为本地补丁，避免依赖重装后失效

4. 清除缓存并重建项目 #

• 清除Metro缓存：

  npx react-native start --reset-cache
  

• 删除Flipper缓存（根据系统路径操作）：
  • macOS: rm -rf ~/Library/Application Support/Flipper
  • Windows: 删除C:\Users\<你的用户名>\AppData\Roaming\Flipper目录
• 重装依赖并重建：

  rm -rf node_modules && yarn install # 或 npm install
  npx react-native run-android # 或 run-ios
  

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