SDK 46 ( 47 ) Hermes is not enabled

mirik · November 8, 2022, 10:45pm

Please provide the following:

was 46, now 47:
Android / real device

Hi

I want to know why i cant debug JS on chrome after upgrading SDK to 47 version ? I am getting this warning on console:

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

I am using expo with dev clients with custom eas build ( locally ) everything works well. Just i cant debug. In app.json i have a jsEngine with hermes , also this code block shows true.

 const isHermes = () => !!global.HermesInternal;
 console.log("isHermesEnabled:", isHermes());

I followed this instruction Using Flipper - Expo Documentation and flipper desktop app also shows:
Metro is connected but no Hermes apps were found. Open a React Native screen with Hermes enabled to connect. Note: you may need to reload the app in order to reconnect the device to Metro.

How to be sure that Hermes enabled ? And how to debug the app ? Desirable in Chrome Devtools.

brents · November 8, 2022, 10:48pm

can you try initializing a new project and seeing if you can reproduce it there?

mirik · November 16, 2022, 9:40am

No, unfortunately did not work.
I read the docs again and i noticed that to check availability of debuggin i have to use this command line “curl http://127.0.0.1:19000/json/list” , but in my case i am using dev client which is started on 8081. And using the curl to get list from :8081 gives me empty array .

This is how i build my app
eas build --profile=development --platform android --local

eas.sjon

"development": {
   "channel": "development",
   "developmentClient": true,
   "distribution": "internal"
}

app.json

{
  "expo" : {
     ...other stuff
     "jsEngine": "hermes"
  }
}

wodin · November 16, 2022, 10:41am

Could you elaborate? It sounds like you were able to reproduce this problem with a new project?

mgscreativa · November 28, 2022, 10:16pm

Well, the same here. Upgraded my project to SDK 47 and configured JS engine as Hermes in app.config.js

Running npx expo start --dev-client on iOS I get this

Any chance to get debugging working?

I have an iPhone XS Max with iOS 16 and the new “developer mode” enabled…maybe that’s the issue here, that new “developer mode”

If I try this on Android device I get:

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

iOS curl http://127.0.0.1:19000/json/list:

[
  {
    "id": "1-2",
    "description": "com.mgscreativa.demostrador-de-tecnologia",
    "title": "Hermes React Native",
    "faviconUrl": "https://reactjs.org/favicon.ico",
    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A19000%2Finspector%2Fdebug%3Fdevice%3D1%26page%3D2",
    "type": "node",
    "webSocketDebuggerUrl": "ws://[::1]:19000/inspector/debug?device=1&page=2",
    "vm": "Hermes"
  },
  {
    "id": "1--1",
    "description": "com.mgscreativa.demostrador-de-tecnologia",
    "title": "React Native Experimental (Improved Chrome Reloads)",
    "faviconUrl": "https://reactjs.org/favicon.ico",
    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A19000%2Finspector%2Fdebug%3Fdevice%3D1%26page%3D-1",
    "type": "node",
    "webSocketDebuggerUrl": "ws://[::1]:19000/inspector/debug?device=1&page=-1",
    "vm": "don't use"
  }
]

Android curl http://127.0.0.1:19000/json/list:
[]

mgscreativa · November 28, 2022, 10:41pm

To add to the confusion, I can see the remote target in chrome://inspect/#devices (previously added localhost:19000 and localhost:8081).

imagen

Clicking the inspect link in Hermes React Native (and the other one too), I get:
DevTools failed to load source map: Could not load content for http://10.0.0.2:19000/node_modules/expo/AppEntry.map?platform=ios&dev=true&hot=false&cachePrevention=4: Fetch through target failed: Cannot read properties of null (reading 'loadNetworkResource'); Fallback: Unknown error

Clicking the link http://10.0.0.2:19000/node_modules/expo/AppEntry.map?platform=ios&dev=true&hot=false&cachePrevention=4 I get:

imagen

mgscreativa · November 28, 2022, 11:02pm

Got it working on iOS!!!

Somehow it seems that metro creates an IPv6 localhost address, and it seems that it doesn’t like to my phone or something (I have, or at least tried to, disable IPv6 on my lan through router config, maybe that’s the issue)

Lucky me I have found this PR: Make Metro start with IPv4 address by bradjones1 · Pull Request #4422 · expo/expo-cli · GitHub, so I changed node_modules/@expo/cli/build/src/start/server/metro/instantiateMetro.js in line 51 and added host: '0.0.0.0',, like this:

    const server1 = await Metro.runServer(metroConfig, {
        hmrEnabled: true,
        websocketEndpoints,
        host: '0.0.0.0',
    });

Sadly, on Android, after starting the server and running my dev build I get the same error message after pressing J

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

juusohamalainenexpo · November 30, 2022, 1:42pm

I’m facing similar issue.

Upgrade project to SDK 47. Enabled Hermes engine for Android and iOS.

Used EAS build to create development clients.

When running dev client on iOS simulator the JS debugger opens fine.

Then on android device I get the same error:
No compatible apps connected. JavaScript Debugging can only be used with the Hermes engine.

Same output as for others when curling.

I am using react-navigation/drawer which uses reanimated 2. Expo Hermes debugging documentation mentions limitations with debugging in this case. Using Hermes Engine - Expo Documentation

The release notes state that: “Open JS Debugger” in apps with Hermes enabled will open the Hermes inspector in Chrome DevTools. Hermes inspector supports the New Architecture / JSI, unlike like debugging remotely in Chrome with JSC.

Correct me if I’m wrong but the way I understand it is there should not be any limitations with using the Chrome DevTools with the set of packages I have.

Any luck with getting the Android Debugging to work?

mirik · November 30, 2022, 2:26pm

Not yet, i am debugging on IOS simulator, with android it is not working. But if your project is small try to create a new empty project , check the debug and if it’s okay transfer your sources to new one and make build again.

mgscreativa · November 30, 2022, 5:02pm

Did you create a new wmpty project and it can be debugged on IOS and Android with Hermes enabled?

mirik · November 30, 2022, 5:31pm

yes, with new project it is working on both platforms at least i have tested 2 times and the second time it worked.

juusohamalainenexpo · December 1, 2022, 10:35am

I created a fresh project from scratch and still the debugger does not start on Android.

Fails on the same error.

eas.json

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

app.json:

{
  "expo": {
    "name": "...",
    "slug": "...",
    "scheme": "...",
    "owner": "...",
    "jsEngine": "hermes",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "extra": {
      "eas": {
        "projectId": "..."
      }
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "bundleIdentifier": "...",
      "supportsTablet": true,
      "icon": "./assets/ios/icon1024.png",
      "buildNumber": "version",
      "infoPlist": {
        "UIRequiresFullScreen": true,
        "CFBundleAllowMixedLocalizations": true,
        "CFBundleDevelopmentRegion": "en"
      }
    },
    "android": {
      "package": "...",
      "icon": "./assets/android/icon1024.png",
      "versionCode": ...,
      "softwareKeyboardLayoutMode": "pan",
      "adaptiveIcon": {
        "foregroundImage": "./assets/android/logo_foreground.png",
        "backgroundImage": "./assets/android/logo_background.png"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "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"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true,
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js}": "eslint"
  }
}

juusohamalainenexpo · December 1, 2022, 12:33pm

I got the Android Debugging working on development client.

Start the metro, scan QR to connect to it. Shake device → Home → Open the metro again from the development client. Then press debug and the debugger opens.

There seems be some issue with the initial load. Refresh did not help for me like the dev menu is guiding.

mgscreativa · December 1, 2022, 6:40pm

Sadly, I didn’t worked fr me, no matter how many times I go home and reopen the Dev Server URL, the JS debug just says No compatible apps connected. JavaScript Debugging can only be used with the Hermes engine.

system · December 31, 2022, 6:40pm

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.