react-native: ERROR Invariant Violation: Module AppRegistry is not a registered callable module ( React native V6)

Description

ERROR TypeError: undefined is not an object (evaluating ‘Object.keys(o)’) ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). 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: Module AppRegistry is not a registered callable module (calling runApplication). 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.

Version

0.67

Output of npx react-native info

BUNDLE ./index.js

ERROR TypeError: undefined is not an object (evaluating ‘Object.keys(o)’) ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). 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: Module AppRegistry is not a registered callable module (calling runApplication). 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. [Info] Stopping Packager

Steps to reproduce

Whenever i am adding StackNavigator code in my App.js then showing above issue… I tried all possible solution to resolve it. but it’s showing same bug again and again.

Snack, code example, screenshot, or link to a repository

App.js `import {NavigationContainer} from ‘@react-navigation/native’; import React from ‘react’; import ‘react-native-gesture-handler’; import {createStackNavigator} from ‘react-navigation-stack’; import Home from ‘./Home’;

const Stack = createStackNavigator(); const SectionListBasics = () => { return ( <> <NavigationContainer> <Stack.Navigator initialRouteName=“Home” headerMode=“Screen”> <Stack.Screen name=“Home” options={{ headerShown: false, }}> {props => <Home {…props} username=“Sports Fan” />} </Stack.Screen> </Stack.Navigator> </NavigationContainer> </> ); };

export default SectionListBasics; `

package.json { "name": "AwesomeProject", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint ." }, "dependencies": { "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.0.9", "@react-navigation/drawer": "^6.1.8", "@react-navigation/native": "^6.0.6", "react": "17.0.2", "react-native": "0.67.1", "react-native-gesture-handler": "^2.2.0", "react-native-reanimated": "^2.2.4", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.10.2", "react-native-vector-icons": "^9.0.0", "react-navigation-stack": "^2.10.4" }, "devDependencies": { "@babel/core": "7.16.10", "@babel/runtime": "7.16.7", "@react-native-community/eslint-config": "2.0.0", "babel-jest": "26.6.3", "eslint": "7.14.0", "jest": "26.6.3", "metro-react-native-babel-preset": "0.66.2", "react-test-renderer": "17.0.2" }, "jest": { "preset": "react-native" } }

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 5
  • Comments: 48

Commits related to this issue

Most upvoted comments

This issue is mostly happen when node_modules folder has been changed by installing new library or some sort of action. Please try removing cache and do yarn install or npm install again

$ npx react-native-clean-project
$ yarn install
+85
phanithken on Jan 26, 2022

Try to add this line in the file where you add the navigation:

import * as React from 'react';

this has worked for me.

+81
puniker on Mar 29, 2022

This worked for me:

npm start -- --reset-cache
npx react-native start --reset-cache
+46
Xplosive06 on Jun 27, 2022

Try to add this line in the file where you add the navigation:

import * as React from 'react';

this has worked for me.

This worked for me thx 😃)

+34
keremerguner on Jun 13, 2022

This worked for me:

npm start -- --reset-cache
npx react-native start --reset-cache

@Xplosive06 After having done that I have a problem because a lot of files were updated, do you had this problem?

+22
Apol0x on Jun 29, 2022

@autonauta @arrluubuutee Have you added metro.config.js file in your project? I was having the same problem, and what worked for me was I added this file with the code:

 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

also, add this in your babel.config.js file

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

Keep your devDependencies in package.json like this

"devDependencies": {
    "@babel/core": "7.17.5",
    "@babel/plugin-external-helpers": "7.0.0",
    "@babel/preset-env": "^7.18.6",
    "@babel/preset-react": "^7.18.6",
    "metro-react-native-babel-preset": "^0.66.2",
  }
+17
SyedSaifAli on Jul 6, 2022

Un-installing the app and re-building it using npx react-native run-android did the job for me.

+8
Manil-SoftNEP on Nov 1, 2022

simple solution that worked for me, make sure your project is clean. if your project is clean and it didn’t work? have a glass of water and “relax”…visit each folder, remove unnecessary libraries that you have added or imports* in each screen (only have what your using*) also use import * as React from ‘react’;

+7
NimsDiamonds on Feb 1, 2023

I was having the issue, but resolved after discarding the changes. dropping back to "react-native": "0.64.2"

+7
agrittiwari on Jul 25, 2022

same issue here

+6
funfake on Dec 10, 2022

I’m also having the same problem in version 0.68.2 without using hermes. When I run react-native packager, I got the follow error messages.

ERROR  TypeError: undefined is not an object (evaluating '_react.PropTypes.array')
ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). 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: Module AppRegistry is not a registered callable module (calling runApplication). 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.

Output of npx react-native info

System:
    OS: macOS 12.4
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Memory: 759.54 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.13.2 - ~/.nvm/versions/node/v16.15.1/bin/npm
    Watchman: 2022.06.20.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      Android NDK: 22.1.7171670
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 13.4/13F17a - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/local/opt/openjdk@11/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: ^0.68.2 => 0.68.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
+6
arrluubuutee on Jul 6, 2022

image

+5
urolovshohruh on Jan 6, 2023

This worked for me:

npm start -- --reset-cache
npx react-native start --reset-cache

@Xplosive06 After having done that I have a problem because a lot of files were updated, do you had this problem?

This worked for me:

npm start -- --reset-cache
npx react-native start --reset-cache

@Xplosive06 After having done that I have a problem because a lot of files were updated, do you had this problem?

Thanks Finally this methods worked for me

+4
Hisham546 on Jul 16, 2022

I’m having the same error:

[08:50:48] 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., js engine: hermes
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException
- ... 7 more stack frames from framework internals

[08:50:48] Invariant Violation: Your JavaScript code tried to access a native module that doesn't exist.

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., js engine: hermes
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError
at node_modules\expo\build\errors\ExpoErrorManager.js:null in createErrorHandler
at node_modules\expo\build\errors\ExpoErrorManager.js:null in <anonymous>
at node_modules\@react-native\js-polyfills\error-guard.js:null in ErrorUtils.applyWithGuard
at node_modules\metro-runtime\src\polyfills\require.js:null in guardedLoadModule

for Android it works, but for IOS it gives this error

My package.json:

{
  "name": "app",
  "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": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-firebase/auth": "^18.6.0",
    "@react-navigation/drawer": "^6.6.6",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "firebase": "^10.5.2",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-reanimated": "~3.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "metro-react-native-babel-preset": "^0.66.2"
  },
  "private": true
}
+2
LucasEdu10 on Nov 1, 2023

In my case the problem was the following. After refactoring and removing some of my styles files I forgot to remove the calling of removed file:

import React from 'react';
import PropTypes from 'prop-types';
import {Text, View, StyleSheet} from 'react-native';
import styleDeckItem from '../../../../styles/deck/item'; - THIS FILE DOESN'T EXIST ANYMORE

const styles = StyleSheet.create({
    item: styleDeckItem.container,
});

export default function Item(props) {
    return (
        <View style={styles.item}>
            <Text>{props.term}</Text>
        </View>
    );
}

I received the same error that is described here, but before it I had a message related to that:

 ERROR  ReferenceError: Property 'styleDeckItem' doesn't exist, js engine: hermes
 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., js engine: hermes

So my idea is to check any errors that come before the Invariant Violation error message and try to fix them. In my case I even tried to clear all the cache and build but it didn’t help. Then I noticed that I have a reference error. >.< After removing calling to the missing file invariant error disappeared.

+2
hailie-rei on Jan 29, 2023

Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated’s babel plugin? ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). 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: Module AppRegistry is not a registered callable module (calling runApplication). 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.

+2
urolovshohruh on Jan 6, 2023

The issue persists I got this issue when I tried using the library known as @react-native-voice/voice Below are the dependencies image Below is the output of the error image

+2
tanaynaik2001 on Dec 13, 2022

I have been solved issue(https://github.com/facebook/react-native/issues/32952#issuecomment-1175782321) by exported ViewPropTypes from deprecated-react-native-prop-types in some packages like below.

The problem is some of node dependencies are export ViewPropTypes from react-native, not export deprecated-react-native-prop-types.

+2
arrluubuutee on Sep 12, 2022

Im having the same problem, tried react-native-cleanproject and cache reset but nothing

+2
autonauta on Jul 5, 2022

I’m having the same error:

[08:50:48] 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., js engine: hermes
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException
- ... 7 more stack frames from framework internals

[08:50:48] Invariant Violation: Your JavaScript code tried to access a native module that doesn't exist.

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., js engine: hermes
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError
at node_modules\expo\build\errors\ExpoErrorManager.js:null in createErrorHandler
at node_modules\expo\build\errors\ExpoErrorManager.js:null in <anonymous>
at node_modules\@react-native\js-polyfills\error-guard.js:null in ErrorUtils.applyWithGuard
at node_modules\metro-runtime\src\polyfills\require.js:null in guardedLoadModule

for Android it works, but for IOS it gives this error

My package.json:

{
  "name": "app",
  "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": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-firebase/auth": "^18.6.0",
    "@react-navigation/drawer": "^6.6.6",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "firebase": "^10.5.2",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-reanimated": "~3.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "metro-react-native-babel-preset": "^0.66.2"
  },
  "private": true
}

I faced a comparable challenge, pinpointing it to an issue stemming from react-native-reanimated. For detailed troubleshooting guidance, check out:https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting/#failed-to-create-a-worklet

+1
JoelDeonDsouza on Feb 26, 2024

This issue is mostly happen when node_modules folder has been changed by installing new library or some sort of action. Please try removing cache and do yarn install or npm install again

$ npx react-native-clean-project
$ yarn install

I would ask my self wtf do I need to re-install again if the error is in code, I would say this should have better resolution then re-installing all packages again

+1
ndpiparava on Jun 23, 2023

Add a few lines in MainApplication.java from this file https://github.com/software-mansion-labs/reanimated-2-playground/blob/master/android/app/src/main/java/com/reanimated2playground/MainApplication.java

Any cache cleaning, reanimated babel plugin setup advices did not help.

Add this imports. import com.facebook.react.bridge.JSIModulePackage; import com.swmansion.reanimated.ReanimatedJSIModulePackage;

Also add this method in ReactNativeHostWrapper protected JSIModulePackage getJSIModulePackage() { return new ReanimatedJSIModulePackage(); }

And finally delete package-lock.json, reinstall node_modules, clean npm/yarn cache.

+1
dr1verrr on Feb 10, 2023

I have changed the name of the main folder now receiving this error in ios. can not resolve this problem… any help?

+1
faizantariq1 on Dec 9, 2022

I’m facing this on expo-go (IOS ) but running on android 😦

+1
yourjhay on Dec 7, 2022
Read more comments on GitHub
← react-native: Error : Use of undeclared identifier 'YGValue' when building iOS
react-native: Error : 'ScrollView' has no propType for native prop 'RCTScrollView.onScrollAnimationEnd' of native type ' BOOL' →