Cannot find native module "ExpoHead"

[shehanGuruge]

Current Behavior

I am trying to integrate expo-router in to the expo project configured in nx. However I keep getting this error and i am unable to implement navigation. The steps I have followed are listed in https://docs.expo.dev/routing/installation/. This is the snapshot of the error I receive,

The error log in the terminal,

 ERROR  Error: Cannot find native module 'ExpoHead'
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.

I tested the same steps defined in the expo docs on a simple expo app and it works as expected

Expected Behavior

Needs to be able to navigate from one screen to another without any errors or issues.

GitHub Repo

No response

Steps to Reproduce

I followed the steps dedicated for the mobile setup mentioned in the installation guide in expo-router. Refer: https://docs.expo.dev/routing/installation/

babel.config.json

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['expo-router/babel']
  };
};

package.json (mobile)

{
  "name": "mobile",
  "version": "0.0.1",
  "private": true,
  "main": "expo-router/entry",
  "dependencies": {
    "@testing-library/jest-native": "*",
    "@testing-library/react-native": "*",
    "metro-config": "*",
    "react-native": "*",
    "expo": "*",
    "react-native-svg": "*",
    "react-native-web": "*",
    "@nx/expo": "*",
    "@expo/metro-config": "*",
    "react-native-svg-transformer": "*",
    "react": "*",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-dev-client": "^2.4.11",
    "expo-dev-menu-interface": "^1.3.0",
    "expo-dev-launcher": "^2.4.13",
    "expo-updates-interface": "^0.10.1",
    "expo-manifests": "^0.7.2",
    "expo-dev-menu": "^3.2.1",
    "@babel/core": "*",
    "tslib": "*",
    "@apollo/client": "*",
    "@reduxjs/toolkit": "^1.9.7",
    "redux": "^4.2.1",
    "react-redux": "^8.1.3",
    "expo-router": "^2.0.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-gesture-handler": "~2.12.0",
    "expo-linking": "~5.0.2",
    "expo-constants": "~14.4.2"
  },
  "scripts": {
    "eas-build-pre-install": "cd ../../ && node tools/scripts/eas-build-pre-install.mjs . apps/mobile && cp package-lock.json apps/mobile",
    "eas-build-post-install": "cd ../../ && node tools/scripts/eas-build-post-install.mjs . apps/mobile",
    "android": "expo run:android",
    "ios": "expo run:ios"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  }
}

app.json

{
  "expo": {
    "name": "Mobile",
    "slug": "mobile",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.example.android"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "com.example.android"
    },
    "scheme": "sample",
    "web": {
      "favicon": "./assets/favicon.png",
      "bundler": "metro"
    },
    "plugins": [
      "expo-router",
      [
        "@config-plugins/detox",
        {
          "skipProguard": false,
          "subdomains": [
            "10.0.2.2",
            "localhost"
          ]
        }
      ]
    ],
    "extra": {
      "eas": {
        "projectId": "84c21022-870f-4d2f-954b-47830eec53b0"
      }
    }
  }
}

index.js

import { registerRootComponent } from 'expo';

import App from './src/app';
// import "expo-router/entry";
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App);

app.tsx

import React, { useRef, useState } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  Linking,
} from 'react-native';
import Svg, { Path } from 'react-native-svg';
import { color } from '@test-repo/theme';
import {APP_NAME} from '@env';
import { ApolloProvider } from  '@apollo/client';
import {client} from "@test-repo/network";
import { MovieScreen } from './MovieScreen';
import { Provider } from 'react-redux';
import { store } from './store/store';
import { Link } from 'expo-router';

export const App = () => {
  const [whatsNextYCoord, setWhatsNextYCoord] = useState<number>(0);
  const scrollViewRef = useRef<null | ScrollView>(null);
  return (
 <SafeAreaView style  = {{flex: 1, backgroundColor:"red"}}>
   <Text>GHelo</Text>
     <Link href={"/"} asChild>
       <Text>
      Refresh screen
       </Text>
     </Link>
    </SafeAreaView>  
  );
};

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 16.9.1
   OS     : darwin-arm64
   npm    : 7.21.1

   nx (global)        : 17.0.1
   nx                 : 17.0.2
   @nx/js             : 17.0.2
   @nx/jest           : 17.0.2
   @nx/linter         : 17.0.2
   @nx/eslint         : 17.0.2
   @nx/workspace      : 17.0.2
   @nx/detox          : 17.0.2
   @nx/devkit         : 17.0.2
   @nx/eslint-plugin  : 17.0.2
   @nx/expo           : 17.0.2
   @nx/react          : 17.0.2
   @nrwl/tao          : 17.0.2
   @nx/web            : 17.0.2
   @nx/webpack        : 17.0.2
   typescript         : 5.1.6

Failure Logs

ERROR  Error: Cannot find native module 'ExpoHead'
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.

Package Manager Version

No response

Operating System

• [X] macOS
• [ ] Linux
• [ ] Windows
• [ ] Other (Please specify)

Additional Information

No response

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any activity for 6 months. Many things may have changed within this time. The issue may have already been fixed or it may not be relevant anymore. If at this point, this is still an issue, please respond with updated information. It will be closed in 21 days if no further activity occurs. Thanks for being a part of the Nx community! 🙏

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any activity for 6 months. Many things may have changed within this time. The issue may have already been fixed or it may not be relevant anymore. If at this point, this is still an issue, please respond with updated information. It will be closed in 21 days if no further activity occurs. Thanks for being a part of the Nx community! 🙏