React DevTools not working for app with Expo router

Puetz commented 1 year ago

🐛 Bug Report

Hello,
I've encountered an issue where React DevTools are not working in Flipper. It occurs for Expo apps using the new SDK version 48 and Expo-Router. In the Flipper Logs I'm getting this error message:

"onerror" event intercepted: ResizeObserver loop limit exceeded 
{source: "file:///D:/Flipper-win/resources/app.asar/index.html", lineno: 0, colno: 0, error: null, stack: undefined}
source: "file:///D:/Flipper-win/resources/app.asar/index.html"
lineno: 0
colno: 0
error: null
stack: undefined

"D:/Flipper-win" is the path of my Flipper installation. The React DevTools Plugin is listed as unavailable and it says "Device plugin 'React DevTools' is not supported by the selected device 'sdk_gphone64_x86_64' (Android)".

I tried different emulators and Android API versions but it is always the same. The issue does not occur when I create an Expo app without Expo router.

To Reproduce

Create an Expo app using npx create-expo-app my-app --template
Select the "Navigation (Typescript)" template
Run npx expo install react-native-gesture-handler and add the following import to your index.ts file: import 'react-native-gesture-handler'; Otherwise you get an error when generating the native android build.
Start the App once (I don't know if this is really neccessary) via npx expo start
Run npx expo install expo-dev-client and npx expo install expo-build-properties
Add the following to your app.json file, else Flipper is using a very old version which did not work at all for me.
```
"plugins": [
  [
    "expo-build-properties",
    {
      "android": {
        "flipper": "0.162.0"
      }
    }
  ]
]
```
I also tried version 0,187.1 but my android build failed with that version.
Create a native build using npx expo run:android
Start the dev server and your app npx expo start --dev-client
Open Flipper and check the plugins / Flipper logs

When I create an app and use the blank typescript template without navigation, everything works.

Environment

package.json:

  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-navigation/native": "^6.0.2",
    "expo": "~48.0.9",
    "expo-font": "~11.1.1",
    "expo-linking": "~4.0.1",
    "expo-splash-screen": "~0.18.1",
    "expo-status-bar": "~1.4.4",
    "expo-system-ui": "~2.2.1",
    "expo-web-browser": "~12.1.1",
    "expo-router": "^1.0.0-rc5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-web": "~0.18.10",
    "expo-dev-client": "~2.1.6",
    "expo-build-properties": "~0.5.1",
    "react-native-gesture-handler": "~2.9.0"
  },

I'm running Flipper 0.187.1 on Windows (downloaded today, March 29th).
I tried Pixel 4, Pixel 6 and Nexus 6 as Android Virtual Devices with API 32 and 33.
I also built my app with EAS instead of locally but that didn't change a thing.

mr-cactus commented 1 year ago

Just hit the same thing.

It's because the Metro bundler is outputting the application's web content to the expo port instead of app information that Flipper is expecting. It is looking for a string to confirm a bundler is running.

I've got around it by patching the @expo/cli package to include the string. Patch below.

Note: When Flipper checks, it receives the static template from expo as it doesn't have Javascript enabled.

diff --git a/static/template/index.html b/static/template/index.html
index 57a7defb44be55c938ac0e29189abeee5ba04e5a..e117bea4e1bab96783eb998a8b6c786cbdb6d2bd 100644
--- a/static/template/index.html
+++ b/static/template/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="flipperHack" content="React Native packager is running" />
+
     <!-- 
       This viewport works for phones with notches.
       It's optimized for gestures by disabling global zoom.

yefim commented 1 year ago

The hack doesn't work for me :/

LinhLM23496 commented 10 months ago

+1 same

facebook / flipper