No compatible apps connected. JavaScript Debugging can only be used with the Hermes engine.

See original GitHub issue

Summary

I created a fresh expo project. Built Android development client APK.

I have enabled Hermes according to the documentation here: https://docs.expo.dev/guides/using-hermes/

eas build --profile devClient --platform android

Installed it on physical Android device. Start dev client on my machine:

npx expo start --dev-client

Then connect the development client ( Scan QR code using Expo GO ). App loads fine but when I press “open JS debugger” the dev tools don’t open and I get an console error. No compatible apps connected. JavaScript Debugging can only be used with the Hermes engine.

The dev menu says try refreshing the app manually first for the debugger to work but that does not solve it for me.

Navigating to “home” in the development client after initial load and opening the metro again seems to solve this issue. Something seems off when starting the development client by scanning the QR code through Expo.

Managed or bare workflow?

bare

What platform(s) does this occur on?

Android

Package versions

  "dependencies": {
    "expo": "~47.0.8",
    "expo-dev-client": "~2.0.1",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "expo-splash-screen": "~0.17.5"
  },

Environment

expo-env-info 1.0.5 environment info: System: OS: macOS 12.5.1 Shell: 3.2.57 - /bin/bash Binaries: Node: 16.14.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 8.3.1 - /usr/local/bin/npm Watchman: 2022.10.17.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: API Levels: 26, 29, 30 Build Tools: 29.0.2, 30.0.2 System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom IDEs: Android Studio: 4.1 AI-201.8743.12.41.6858069 Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild npmPackages: expo: ~47.0.8 => 47.0.8 react: 18.1.0 => 18.1.0 react-native: 0.70.5 => 0.70.5 npmGlobalPackages: eas-cli: 2.8.0 expo-cli: 6.0.8 Expo Workflow: bare

Reproducible demo

eas.json:

{
  "cli": {
    "version": ">= 2.8.0"
  },
  "build": {
    "devClient": {
      "distribution": "internal",
      "developmentClient": true,
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true
      }
    }
  }
}

app.json:

{
  "expo": {
    "name": "...",
    "slug": "...",
    "scheme": "...",
    "owner": "...",
    "version": "1.0.0",
    "orientation": "portrait",
    "userInterfaceStyle": "light",
    "jsEngine": "hermes",
    "extra": {
      "eas": {
        "projectId": "..."
      }
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "android": {
      "package": "...",
      "versionCode": ...
    }
  }
}

Stacktrace (if a crash is involved)

No response

Issue Analytics

  • State:open
  • Created 10 months ago
  • Reactions:1
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
Kudocommented, Dec 6, 2022

did you test it on an android emulator? when i test it on android emulator and load bundle on http://10.0.2.2:8081, the ip address is that the debugger cannot reach correctly. after you go back to home and load again, it can detect the LAN ip and it works. does it sound like what you came across?

0reactions
Slapboxcommented, Dec 23, 2022

@OneHatRepo also

because the debugger doesn’t show my source files, rather it shows a single main.jsbundle file.

This is a known issue. You need to reload the app from within the dev-client and then your source files should appear in the debugger. It’s a huge pain.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using Hermes Engine - Expo Documentation
No compatible apps connected. JavaScript Debugging can only be used with the Hermes engine. when opening the debugger. Make sure you set up...
Read more >
Using Hermes - React Native
Debugging JS on Hermes using Google Chrome's DevTools​​​ Hermes supports the Chrome debugger by implementing the Chrome inspector protocol. This ...
Read more >
Using Hermes in React Native - LogRocket Blog
Debugging a React Native app in Chrome​​ Hermes has support for debugging JavaScript via Chrome DevTools by implementing the Chrome inspector ...
Read more >
How to enable Hermes Engine in an existing react native app
Hermes is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, enabling Hermes will result in ...
Read more >
EXPO + react-native-reanimated debug issue - Stack Overflow
This is what that link to Expo's docs show me at this time: Reanimated uses React Native APIs that are incompatible with "Remote...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found