For React Native Expo project built for iOS, unable to use debugger whether Hermes or JSC is specified as jsengine

Question

I am trying to access the debugger for iOS for a React Native project using Expo but for either Hermes or JSC specified as the jsengine in the app.json file, I am unable to use Chrome Dev Tools (hot key "j" while the metro server is running), or any debugging env for that matter. For Hermes pressing "j" gives the warning

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

For JSC the bundler loads up to 98% but then the app launch times out indicating the dev server cannot be reached. Additionally for Hermes, when I press command+D (Mac OS) when app is running, I see no option for debugging the app. I am using the expo "AppEntry.js" file as my entry point as specified in my package.json.

What am I missing regarding proper debug setup for iOS?

The app runs and is debuggable using the Hermes engine for the Android platform. Using Expo Go is not an option in my case (assume this is due to react-native-firebase incompatibility).

Here's my app.json:

{
  "expo": {
    "name": "NatureCounter",
    "slug": "NatureCounter",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "jsEngine": "hermes",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "crowddoing.world.naturecounter"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.naturecounter"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "bed483af-b658-4941-8cc1-a909337111a1"
      }
    }
  }
}

and here's the package.json:

{
  "name": "NatureCounter",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-native-community/checkbox": "^0.5.17",
    "@react-native-community/datetimepicker": "^8.2.0",
    "@react-native-community/netinfo": "11.3.1",
    "@react-native-firebase/app": "^21.0.0",
    "@react-native-firebase/auth": "^21.0.0",
    "@react-native-firebase/dynamic-links": "^21.0.0",
    "@react-native-firebase/firestore": "^21.0.0",
    "@react-native-firebase/installations": "^21.0.0",
    "@react-native-picker/picker": "^2.8.1",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/drawer": "^6.7.2",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/stack": "^6.4.1",
    "@reduxjs/toolkit": "^2.2.7",
    "@shopify/react-native-skia": "^1.4.1",
    "@types/react": "~18.2.79",
    "axios": "^1.7.7",
    "axios-rate-limit": "^1.4.0",
    "expo": "~51.0.28",
    "expo-status-bar": "~1.12.1",
    "immutable": "^4.3.7",
    "lodash": "^4.17.21",
    "lottie-react-native": "^7.0.0",
    "moment": "^2.30.1",
    "native-base": "^3.4.28",
    "rand-seed": "^2.1.7",
    "react": "18.2.0",
    "react-native": "0.74.5",
    "react-native-background-fetch": "^4.2.7",
    "react-native-bluetooth-status": "^1.5.1",
    "react-native-bouncy-checkbox": "^4.1.2",
    "react-native-calendars": "^1.1307.0",
    "react-native-chart-kit": "^6.12.0",
    "react-native-devsettings": "^1.0.5",
    "react-native-easy-grid": "^0.2.2",
    "react-native-elements": "^3.4.3",
    "react-native-extra-dimensions-android": "^1.2.5",
    "react-native-fbsdk-next": "^13.1.1",
    "react-native-fs": "^2.20.0",
    "react-native-geolocation-service": "^5.3.1",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-get-random-values": "^1.11.0",
    "react-native-image-picker": "^7.1.2",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-maps": "^1.18.0",
    "react-native-modal": "^13.0.1",
    "react-native-outside-press": "^1.2.2",
    "react-native-paper": "^5.12.5",
    "react-native-paper-dates": "^0.22.26",
    "react-native-permissions": "^5.0.2",
    "react-native-raw-bottom-sheet": "^3.0.0",
    "react-native-reanimated": "3.16.1",
    "react-native-reanimated-carousel": "4.0.0-alpha.12",
    "react-native-redash": "16.2.2",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "^4.11.0",
    "react-native-scroll-bottom-sheet": "^0.7.0",
    "react-native-simple-time-picker": "^1.3.11",
    "react-native-simple-toast": "^3.3.1",
    "react-native-svg": "^15.7.1",
    "react-native-svg-uri": "^1.2.3",
    "react-native-vector-icons": "^10.2.0",
    "react-native-video": "^6.6.3",
    "react-native-wheel-pick": "^1.2.2",
    "react-redux": "^9.1.2",
    "realm": "^12.13.1",
    "redux-actions": "2.6.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-immutable": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^3.1.0",
    "rn-fetch-blob": "^0.12.0",
    "styled-components": "^6.1.14",
    "typescript": "~5.3.3",
    "victory-native": "^41.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "react-native-svg-transformer": "^1.5.0"
  },
  "private": true
}

For React Native Expo project built for iOS, unable to use debugger whether Hermes or JSC is specified as jsengine

Answers (1)

Related Questions