javascriptreact-nativeimportexpodependencies

Error: Invariant Violation: Your Javascript code tried to access a native module that doesn't exist


Every time that I run my app on expo go I receive the following error: Error: Invariant Violation: Your Javascript code tried to access a native module that doesn't exist.

This happens after I run npx expo start --tunnel and I scan the QR code. The IOS bundling completes but I never see the app as the error above appears in the terminal.

There are a few more lines of my error:

If you're trying to use a module that is not supported in Expo Go, you need to create a development build of your app. See https://docs.expo.dev/development/introduction/ for more info. ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Here is my App.js code where I display my app:

import React from 'react';
import { Provider } from 'react-native-paper'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { theme } from './src/core/theme'
import auth from '@react-native-firebase/auth'
import StartScreen from './src/screens/StartScreen'
import LoginScreen from './src/screens/LoginScreen'
import RegisterScreen from './src/screens/RegisterScreen'
import ResetPasswordScreen from './src/screens/ResetPasswordScreen'
import Dashboard from './src/screens/Dashboard'
import ProfileScreen from './src/screens/Profile'


const Stack = createStackNavigator()

export default function App() {
  return (
    <Provider theme={theme}>
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="StartScreen"
          screenOptions={{
            headerShown: true,
          }}
        >
          <Stack.Screen name="StartScreen" component={StartScreen} />
          <Stack.Screen name="LoginScreen" component={LoginScreen} />
          <Stack.Screen name="RegisterScreen" component={RegisterScreen} />
          <Stack.Screen name="Dashboard" component={Dashboard} />
          <Stack.Screen name="ResetPasswordScreen" component={ResetPasswordScreen}/>
          <Stack.Screen name="ProfileScreen" component={ProfileScreen}/>
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  )
}

Here is my package.json code with all my dependencies:

{
  "name": "rn-starter-update",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@draftbit/ui": "^46.5.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-firebase/app": "^16.5.0",
    "@react-native-firebase/auth": "^16.5.0",
    "@react-navigation/stack": "^6.3.7",
    "expo": "~47.0.3",
    "expo-constants": "^14.0.2",
    "expo-status-bar": "~1.4.2",
    "express": "^4.18.2",
    "firebase": "8.2.3",
    "ios": "^0.0.1",
    "mongoose": "^6.7.2",
    "pod": "^0.9.0",
    "react": "18.1.0",
    "react-native": "^0.70.5",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-google-signin": "^2.1.1",
    "react-native-paper": "^4.12.5",
    "react-native-reanimated": "~2.12.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-status-bar-height": "^2.6.0",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

Solutions that I have tried:

  1. Deleting my node_modules folder and reinstalling everything with npm install.
  2. ERROR Invariant Violation: Your JavaScript code tried to access a native module that doesn't exist

3.https://github.com/facebook/react-native/issues/26687

Thank you for your help!


Solution

  • I experienced the same issue after installing @react-native-firebase/app.

    The @react-native-firebase/app package is a native module and cannot be used in Expo Go (expo start).

    To use native modules in expo you must use a development build with the expo-dev-client package.

    More information on development builds and how to setup one can be found here: https://docs.expo.dev/development/introduction/