Flipper: React Native: React DevTools fails to load component info when using Hermes

[helixbass]

🐛 Bug Report

It seems like whenever Hermes is enabled and I try to view component info in the React DevTools plugin against an Android emulator, it fails

To Reproduce

$ npx react-native init MyApp --template react-native-template-typescript

Set enableHermes: true in android/app/build.gradle

$ rm -rf node_modules && yarn

$ yarn start



md5-06e1a5b4d99b522aab923f0a00b2b80b



$ yarn android



md5-ebe9b19abd2f6875303366439b910099



[Sat Feb 06 2021 13:17:11.801]  LOG      [React DevTools] Error calling listener {"event": "inspectElement", "payload": {"id": 19, "rendererID": 1}}
[Sat Feb 06 2021 13:17:11.807]  LOG      error: [TypeError: undefined is not a function]
[Sat Feb 06 2021 13:17:11.811]  ERROR    [TypeError: undefined is not a function]

Environment

Flipper version 0.74.0
MacOS 10.15.7
Android emulator running Android R (Android 11.0, API level 30)
Fresh react-native-template-typescript install ([email protected], [email protected])

[shaikh7862]

Hi @helixbass, have you found any solution to this issue?

[helixbass]

No this is still happening when using Flipper v0.76.0

Fwiw I also see this when I run standalone react-devtools v4.10.1-3a8c04e3b2 (outside of Flipper) so this may be an issue with React DevTools rather than Flipper itself?

My "workaround" has been if I want to use React DevTools I temporarily turn off Hermes (so eg per the docs, set enableHermes: false in android/app/build.gradle, run ./gradlew clean from android/ directory, and relaunch the app)

[shaikh7862]

Thank for the update and the workaround.

But my project depends on reanimated 2 which depends on Hermes. So I can't disable Hermes as of now.

[helixbass]

Ah good point I recently upgraded to reanimated 2 so probably now can't use that workaround either!

I opened an issue with React DevTools: https://github.com/facebook/react/issues/20884

And looks like a similar issue has been filed with React Native: https://github.com/facebook/react-native/issues/30669

[tbrrt11]

Same problem here (Flipper 0.78.0), but I'm not using Hermes in any way. I'm on Ubuntu 18.04, running the app on a physical android device.

Flipper

App

Terminal Logs

[Sat Feb 27 2021 15:07:48.392]  LOG      [React DevTools] Error calling listener {"event": "inspectElement", "payload": {"id": 516, "rendererID": 1}}
[Sat Feb 27 2021 15:07:48.400]  LOG      error: [TypeError: undefined is not a function]
[Sat Feb 27 2021 15:07:48.402]  ERROR    [TypeError: undefined is not a function]

[mweststrate]

Closing the issue here as the issue is already open on react-native, and Flipper isn't involved in the DevTools -> React protocol.