[Feature] Support hermes engine for Exponent

[rafaeltab]

🚀 Feature request

I would like the extension to support debugging exponent apps that have the Hermes engine enabled.

What scenarios will this solve?

When an exponent user requires Hermes, for example when using react-native-reanimated, they currently can not debug their application using this extension.

What will this allow you to do? Will this benefit other developers?

It would allow exponent with Hermes users to debug their application inside VSCode.

[EzioLi01]

@rafaeltab Thanks for reaching us, we will investigate this feature firstly and will update this issue for the progress.

[EzioLi01]

Hi @rafaeltab, could you please provide some details or steps for your scenario, maybe we can show you some workarounds for now to unblock your work now.

[rafaeltab]

Hey @EzioLi01,

This is a link to the commit in my repository where I added Hermes support and a launch config that indicates reasons I can't use each configuration.

https://github.com/Kurabu-chan/Kurabu/commit/de2cd9e35505d935c510cff1cd9d6dd169b72461

Please note, that it is a monorepo that uses turborepo, the app is inside the apps/app folder.

For more generic instructions:

• Create an expo application
• Use any JSI module, personally I used react-navigation which depends on react-native-reanimated, a JSI module
• Attempt to debug using a browser
  • this does not work
• Add Hermes support
• Try to debug using the built in hermes debugger
  • This should work, though in my case this also doesn't work for some reason (outside the scope of this issue)
• Try to debug using any configuration for the react-native-vscode plugin
  • this does not work

[EzioLi01]

Looking into this.

[EzioLi01]

@rafaeltab I'm not sure if this temporary workaround works for you. But you can try it firstly.

1. Create expo app

2. Add "jsEngine" : "hermes" in App.json

3. Run expo eject

4. Debug in Android or iOS with below config. { "name": "Debug iOS Hermes - Experimental", "cwd": "${workspaceFolder}", "type": "reactnativedirect", "request": "launch", "platform": "ios" }

5. For expo on web I think we need to consider adding support for it and manage in order of priorities.

[rafaeltab]

That worked quite well, thank you!

[rafaeltab]

Didn't mean to close the issue.

[EzioLi01]

That worked quite well, thank you!

@rafaeltab That's great! No need to close this issue, we will still manage and look into this feature in the future!

[EzioLi01]

Checked again, I can debug expo sample app in Hermes Engine with Debug in Exponent or Attach to packager command following Expo applications and Using Hermes Engine, please try it again.

If you still have same issue in the specific project. Please create the new issue for it. I will update related documentation in RNT.

[rafaeltab]

I have tried again, and it seems to work, though I do have some problems that don't occur without debugging or while debugging using your previously mentioned method. I will have to investigate their cause further.

[EzioLi01]

I have tried again, and it seems to work, though I do have some problems that don't occur without debugging or while debugging using your previously mentioned method. I will have to investigate their cause further.

Great, please create the new issue for your problem if you need some other help.

[rafaeltab]

I managed to solve it, it was related to react-navigation, and it used a legacy version of reanimated if debugging was enabled, I turned this feature off, and now everything is working fine. Thanks a lot for all the help!

Related post in react-navigation https://github.com/react-navigation/react-navigation/issues/10264#issuecomment-1042697842