React Native连接Flipper调试时出现window.document.createElement错误求助

问题原因 #

该错误是因为Flipper的部分插件（如Web调试类插件）在React Native环境中尝试调用浏览器专属的window.document对象，但React Native的JS运行环境（Hermes或JSC）并不提供这个对象，从而触发报错。

修复步骤 #

1. 禁用无关Flipper插件 #

打开Flipper客户端，进入Settings -> Plugins，关闭所有依赖浏览器DOM环境的插件（比如Chrome DevTools、Web Inspector这类），仅保留React Native相关插件（如React Native Debugger、Performance等）。

2. 检查项目Flipper初始化配置 #

• Android端：打开android/app/src/main/java/com/[你的项目名]/MainApplication.java，确保初始化代码只加载适配React Native的插件，移除任何涉及WebView或DOM的插件代码：

FlipperClient client = AndroidFlipperClient.getInstance(this);
client.addPlugin(new ReactNativeFlipper(this, getReactNativeHost().getReactInstanceManager()));
client.addPlugin(new DatabasesFlipperPlugin(this));
client.addPlugin(new SharedPreferencesFlipperPlugin(this));
client.start();

• iOS端：打开ios/[你的项目名]/AppDelegate.m，确认Flipper初始化逻辑未引入Web相关依赖。

3. 更新Flipper与React Native版本 #

版本不兼容可能导致这类问题：

• 更新Flipper客户端到最新稳定版，同时升级项目中的react-native-flipper依赖：yarn upgrade react-native-flipper或npm update react-native-flipper
• 按照官方文档流程升级React Native到最新稳定版

4. 清除缓存后重新构建 #

• 清除React Native缓存：npx react-native start --reset-cache
• Android端：进入项目根目录/android文件夹，执行./gradlew clean
• iOS端：进入项目根目录/ios文件夹，执行pod deintegrate && pod install
  完成后重启项目和Flipper，重新尝试连接。

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