Invariant Violation: "app" has not been registered - AppRegistry.js | runnables[appKey] is undefined

[AlessioCamm]

Description

After upgrading to 0.69 and upgrading a lot of packages, I'm not able to build Android anymore. With iOS, there is no problem but Android is impossible to build. A simple react-native run-android launch the app on the phone, but the app won't appear. I only got this error :

ExceptionsManager.js:149 Invariant Violation: "app" 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.

So, after some search, I found the AppRegistry.js file (node_modules/eact-native/Librairies/ReactNative). There is a const named runnables[appKey], and with iOS, this show me a lot of informations, but with Android, I only got undefined.

Someone has the same problem ?

Version

0.69.0

Output of npx react-native info

System:

OS: macOS 12.6 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 116.24 MB / 16.00 GB Shell: 3.2.57 - /bin/bash

Binaries:

Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.17 - ~/Documents/myFiles/myProject/node_modules/.bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman

Managers:

CocoaPods: 1.11.3 - /usr/local/bin/pod

SDKs:

iOS SDK:

Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3

Android SDK:

Android NDK: 22.1.7171670

IDEs:

Android Studio: 2022.1 AI-221.6008.13.2211.9514443 Xcode: 13.2/13C90 - /usr/bin/xcodebuild

Languages:

Java: 19.0.2 - /usr/bin/javac Python: Not Found

npmPackages:

@react-native-community/cli: ^4.13.0 => 4.14.0 react: ^18.2.0 => 18.2.0 react-native: ^0.69.0 => 0.69.0 react-native-macos: Not Found

npmGlobalPackages:

react-native: Not Found

Steps to reproduce

Upgrade React-Native to 0.69, and do react-native run-android.

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

The error is here :

  runApplication(
    appKey: string,
    appParameters: any,
    displayMode?: number,
  ): void {
    if (appKey !== 'LogBox') {
      const logParams = __DEV__
        ? '" with ' + JSON.stringify(appParameters)
        : '';
      const msg = 'Running "' + appKey + logParams;
      infoLog(msg);
      BugReporting.addSource(
        'AppRegistry.runApplication' + runCount++,
        () => msg,
      );
    }
    invariant(
      runnables[appKey] && runnables[appKey].run,
      `"${appKey}" has not been registered. This can happen if:\n` +
        '* 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.\n' +
        "* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.",
    );
    SceneTracker.setActiveScene({name: appKey});
    runnables[appKey].run(appParameters, displayMode);
  },

[carlosalmonte04]

Can you please share the contents of the index.js file at the root of the project?

The error usually points to the code below which is found at <root folder>/index.js. Also from version did you upgrade?

// index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App); // <- this line

[AlessioCamm]

Can you please share the contents of the index.js file at the root of the project?

The error usually points to the code below which is found at <root folder>/index.js. Also from version did you upgrade?

// index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App); // <- this line

Yes, I point to index.andoird.js and here it is :

import './src/Business/Config/ReactotronConfig'
import { AppRegistry } from 'react-native'
import App from './src/mobile/App/Containers/App'

AppRegistry.registerComponent("appName", () => App)

Btw, my file index.ios.js is exactly the same and work fine

[carlosalmonte04]

What else have you tried to fix this error?

Side note: https://github.com/facebook/react-native/commit/57774a4a981e2f12cfe9b029447e34f203221b18

./app.json

{
  "name": "AwesomeApp",
  "displayName": "AwesomeApp"
}

[vikil143]

I still facing this issue while upgraded to react native 0.71.4 from 0.64 any solution for this issue I tried lots of solutions which are

1. Matched project name in app.json
2. also ensure in MainActivity getMainComponentName has match with app.json
3. also ensure metro bundler running from proper folder
4. also ensure previous app is deleted from mobile
5. also ensure project file name was match with app.json and MainActivity names

index.js file

 import 'react-native-gesture-handler';
 import {AppRegistry, LogBox} from 'react-native';
 import {name as appName} from './app.json';
 import App from "./App"
 AppRegistry.registerComponent(appName, () => App);

app.json file

{
   "name": "appname",
   "displayName": "displayName",
   "react-native-google-mobile-ads": {
   "android_app_id": "key"
  }
}

MainActivity.java file ensuring match with app.json with this file

  @Override
    protected String getMainComponentName() {
        return "appname";
    }

Please any solution for reply this

[carlosalmonte04]

Hey @vikil143 your index.js file is missing the import for App. If it still doesn't work, it would be easier to help you if you please provide a reproducer.

[vikil143]

@carlosalmonte04 Thanks for the quick reply but you said its not a case I'm forgotten to mention this in the code so reproducer means how can I do it can you explain, please

[vikil143]

This issue was cleared successfully. So anyone wants to resolve this make sure the below points are cleared

1. First match In app.json name as the same name in MainActivity.java return value of getMainComponentName
2. Second try to debug code by commenting in the entry(which is index.js or App.js) file check this where is exactly the main problem My problem was I updated the app and all required packages but one function was deprecated in redux which is createStore by solving this resolved my issue

[TomJerry56]

I'm facing the same issue with react-native 0.71. Not using redux createStore in my case. The index.js, app.json and MainActivity re same as above. Any quick help?

[vikil143]

Can you send some more details like what are trying to do and what you did? and My suggestion is debug the code properly then you can get where is actual bug

[TomJerry56]

index.js: import { AppRegistry } from 'react-native'; import main from './app'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => main); export default main;

app.json: { "name": "main", "displayName": "main" }

MainActivity: @Override protected String getMainComponentName() { return "main"; }

Using the same app name in all the files. Debugged the code, In AppRegistry getting appKey as undefined. Getting warnings in console that Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0. Changed the deprecated feature jcenter() to mavenCentral(). But still getting same error.

[vikil143]

This error also caused when you running metro bundler of different project is not closed. So try to kill all metro bundlers as well as restart your PC check once

[TomJerry56]

This error also caused when you running metro bundler of different project is not closed. So try to kill all metro bundlers as well as restart your PC check once

Tried, but the issue still persists.

[vikil143]

@TomJerry56 What was cause this issue appear?

[TomJerry56]

@TomJerry56 What was cause this issue appear?

Upgradation of react-native to 0.71, react to 18, gradle, node and its respective dependencies

[vikil143]

@TomJerry56 bro what I did after working lot with issue is debugging from index file commenting root codes (means top level code) and cross checking the app run's properly or not please try this

[TomJerry56]

@vikil143 Tried debugging the issue, Understood that the issue is due to the 'require' statements in the js files. The error is thrown wherever export/import is used in tsx files ie; require in compiled js files. Trying to resolve it.

[vikil143]

@TomJerry56 great happy coding

[artemis-prime]

@vikil143 Tried debugging the issue, Understood that the issue is due to the 'require' statements in the js files. The error is thrown wherever export/import is used in tsx files ie; require in compiled js files. Trying to resolve it.

@TomJerry56 Could you please clarify precisely what resolved it??

[TomJerry56]

@artemis-prime Still it is not resolved.

[egarikka]

in my case, there were 2 files left from the previous developer and for a long time I could not understand the cause of the error Here we have App.js and index.js

with this code in index.js

// This is the first file that ReactNative will run when it starts up.
// If you use Expo (`yarn expo:start`), the entry point is ./App.js instead.
// Both do essentially the same thing.

import App from "./app/app.tsx"
import React from "react"
import { AppRegistry } from "react-native"
import RNBootSplash from "react-native-bootsplash"

function IgniteApp() {
  return <App hideSplashScreen={RNBootSplash.hide} />
}

AppRegistry.registerComponent("main", () => IgniteApp)
export default App

and code in App.js

import App from "./app/app.tsx"
import React from "react"
import { registerRootComponent } from "expo"
import { Platform } from "react-native"
import * as SplashScreen from "expo-splash-screen"

SplashScreen.preventAutoHideAsync()

function IgniteApp() {
  return <App hideSplashScreen={SplashScreen.hideAsync} />
}

if (Platform.OS !== "web") {
  registerRootComponent(IgniteApp)
}

export default IgniteApp

when a build is created, expo refers to App.js and does not see the AppRegistry.registerComponent there, to solve the problem, it is enough to replace all the code in App.js with the code from Index.js and everything will work

[DaraUkpong]

@egarikka solution works. I am using ignite-cli with RN 0.71. In the debug build it works fine, but on the release build it crashes. The release build references the .App.js file which does not have the AppRegistry declaration instead of the .index.js file. Just make sure that both files are the same. Hope this helps anyone scaffolding with ignite-cli

[k-v-dimitrov]

@DaraUkpong It absolutely worked. Shall we raise an issue in ignite boilerplate? If I didn't come across your comment I would have never figured it out. How did you manage to find it?

[DaraUkpong]

@DaraUkpong It absolutely worked. Shall we raise an issue in ignite boilerplate? If I didn't come across your comment I would have never figured it out. How did you manage to find it?

I had to take a close look of where the app was actually reading it's entry point from using the Android Studio logging tool. On both builds it read from app.js or index.js(release and dev build). I just had to make sure both had the same content.

At the time I just needed a solution the problem, I haven't researched as to why that was happening given that I had no prior interaction with those files.

An Issue - Yes that will work. I've not tried the new update to confirm if it's something that has been resolved. You trying to solve this issue at this time means it probably hasn't.

[singularvoice]

in my case, there were 2 files left from the previous developer and for a long time I could not understand the cause of the error Here we have App.js and index.js

with this code in index.js

// This is the first file that ReactNative will run when it starts up.
// If you use Expo (`yarn expo:start`), the entry point is ./App.js instead.
// Both do essentially the same thing.

import App from "./app/app.tsx"
import React from "react"
import { AppRegistry } from "react-native"
import RNBootSplash from "react-native-bootsplash"

function IgniteApp() {
  return <App hideSplashScreen={RNBootSplash.hide} />
}

AppRegistry.registerComponent("main", () => IgniteApp)
export default App

and code in App.js

import App from "./app/app.tsx"
import React from "react"
import { registerRootComponent } from "expo"
import { Platform } from "react-native"
import * as SplashScreen from "expo-splash-screen"

SplashScreen.preventAutoHideAsync()

function IgniteApp() {
  return <App hideSplashScreen={SplashScreen.hideAsync} />
}

if (Platform.OS !== "web") {
  registerRootComponent(IgniteApp)
}

export default IgniteApp

when a build is created, expo refers to App.js and does not see the AppRegistry.registerComponent there, to solve the problem, it is enough to replace all the code in App.js with the code from Index.js and everything will work

Hi guys I want to let you know that you can achieve this solution more efficiently. For projects created by Ignite, there is a main property in their package.json that references to AppEntry of the expo, so if you run or build your project with expo there is no issue, but if you try to run the project by react-native run-android the index.js will be used instead of App.js. but if you try to build your app with Android Studio the Android Studio uses the main property of package.json for finding the app entry and because the final APK can not find the js bundle, you just need to remove this line from package.json without touching the App.js and index.js

"main": "node_modules/expo/AppEntry.js",

[sleekLancelot]

in my case, there were 2 files left from the previous developer and for a long time I could not understand the cause of the error Here we have App.js and index.js

with this code in index.js

// This is the first file that ReactNative will run when it starts up.
// If you use Expo (`yarn expo:start`), the entry point is ./App.js instead.
// Both do essentially the same thing.

import App from "./app/app.tsx"
import React from "react"
import { AppRegistry } from "react-native"
import RNBootSplash from "react-native-bootsplash"

function IgniteApp() {
  return <App hideSplashScreen={RNBootSplash.hide} />
}

AppRegistry.registerComponent("main", () => IgniteApp)
export default App

and code in App.js

import App from "./app/app.tsx"
import React from "react"
import { registerRootComponent } from "expo"
import { Platform } from "react-native"
import * as SplashScreen from "expo-splash-screen"

SplashScreen.preventAutoHideAsync()

function IgniteApp() {
  return <App hideSplashScreen={SplashScreen.hideAsync} />
}

if (Platform.OS !== "web") {
  registerRootComponent(IgniteApp)
}

export default IgniteApp

when a build is created, expo refers to App.js and does not see the AppRegistry.registerComponent there, to solve the problem, it is enough to replace all the code in App.js with the code from Index.js and everything will work

I don't use expo so this might not work for me. Has anyone using bare RN workflow been able to resolve this?

[gkasireddy202]

I am facing the same issue on iOS and react-native:0.73.2.

[sleekLancelot]

Resolved by deleting the build on my emulator and creating another build.

[sz423242122]

I am facing the same issue on iOS and react-native:0.73.2.

I am using bare RN workflow. and also facing the same issue. I was used ”create-react-native-library“ to create a turbo module. After I use "npx react-native@latest run-ios --udid xxxx" to build application on my iphone. react-native version was upgrad to v0.74.3. On my iphone device I get 2 Error: Invariant Violation: new NativeEventEmitter() requires a non-null argument. `Invariant Violation: "CppTurboExample" 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 am double check my appname. vs code => "root folder/example/app.json" . My appname is "CppTurboExample" xcode => "root folder/../AppDelegate.mm". the line 9 code is "self.moduleName = @"CppTurboExample";" so my appname is looks same.

According to the following article. There are two best ways to fix it. React Native fucking error that i have been trynna fix for 22 hours now 1.creating a new react native project, then copy paste my code on it (I trying) 2.reinstall 2.1.Quit everything and restart machine 2.2.cd ios && pod install && cd.. 2.3.Whatever recent npm package you installed, uninstall it. Then Build your app. 2.4.If these 3 fail, audition for a role on Living Alaska and become one with the wild

[jljonnard]

Bad import in App.js or App.tsx will trigger this error.

For example, when upgrading librairies some import breaking changes can happen :

import Component from ../path

But now with the breaking change it is :

import { Component } from ../path

Try to comment out imports one by one and see if one comment clear the error. Then you just have to find documentation about the lib that triggers the error.

I had this error while upgrading React Native and I fixed it this way !

It has nothing to do with appname.