react-native icon indicating copy to clipboard operation
react-native copied to clipboard
verified publisher icon facebook

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

Open cmschandan opened this issue 3 years ago • 40 comments

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" } }

cmschandan avatar Jan 22 '22 11:01 cmschandan

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

phanithken avatar Jan 26 '22 14:01 phanithken

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

import * as React from 'react';

this has worked for me.

puniker avatar Mar 29 '22 09:03 puniker

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 :))

keremerguner avatar Jun 13 '22 21:06 keremerguner

Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API? See https://reactnavigation.org/docs/hello-react-navigation for the latest API and guides. 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.

pardeep90snow avatar Jun 23 '22 12:06 pardeep90snow

This worked for me:

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

Xplosive06 avatar Jun 27 '22 08:06 Xplosive06

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?

Apol0x avatar Jun 29 '22 10:06 Apol0x

having the same problem in ios. Tried the above workaround, but doesn't work for me.

SyedSaifAli avatar Jul 02 '22 14:07 SyedSaifAli

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

autonauta avatar Jul 05 '22 16:07 autonauta

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

arrluubuutee avatar Jul 06 '22 04:07 arrluubuutee

@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",
  }

SyedSaifAli avatar Jul 06 '22 18:07 SyedSaifAli

@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",
  }

Hi, I've done just like what you recommend above, but still facing the same issue, do you have any additional info related to this? thank you @SyedSaifAli

hicath avatar Jul 11 '22 21:07 hicath

@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",
  }

Hi, I've done just like what you recommend above, but still facing the same issue, do you have any additional info related to this? thank you @SyedSaifAli

Can you make sure that your babel.config.json and metro.config.json is created in parallel to node_modules/ folder. Also after applying these changes, remove node_modules, reinstall(npm install) and run npx start --reset-cache.

SyedSaifAli avatar Jul 13 '22 20:07 SyedSaifAli

Ok app registry working thank alot

On Thu, Jul 14, 2022, 2:17 AM Saif Ali Khan @.***> wrote:

@autonauta https://github.com/autonauta @arrluubuutee https://github.com/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": { @./core": "7.17.5", @./plugin-external-helpers": "7.0.0", @./preset-env": "^7.18.6", @./preset-react": "^7.18.6", "metro-react-native-babel-preset": "^0.66.2", }

Hi, I've done just like what you recommend above, but still facing the same issue, do you have any additional info related to this? thank you @SyedSaifAli https://github.com/SyedSaifAli

Can you make sure that your babel.config.json and metro.config.json is created in parallel to node_modules/ folder. Also after applying these changes, remove node_modules, reinstall(npm install) and run npx start --reset-cache.

— Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/32952#issuecomment-1183662592, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZVPHIYF56UWEQAQ3UY4J2TVT4TOHANCNFSM5MR3FEIA . You are receiving this because you commented.Message ID: @.***>

pardeep90snow avatar Jul 14 '22 01:07 pardeep90snow

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

Hisham546 avatar Jul 16 '22 06:07 Hisham546

@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",
  }

Hi, I've done just like what you recommend above, but still facing the same issue, do you have any additional info related to this? thank you @SyedSaifAli

Can you make sure that your babel.config.json and metro.config.json is created in parallel to node_modules/ folder. Also after applying these changes, remove node_modules, reinstall(npm install) and run npx start --reset-cache.

I already have the metro.config.js file in the project. I would like to show metro.config.js and babel.config.js.

metro.config.js

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

module.exports = {
	transformer: {
		getTransformOptions: async () => ({
			transform: {
				experimentalImportSupport: false,
				inlineRequires: true
			}
		}),
		assetPlugins: ['expo-asset/tools/hashAssetFiles']
	}
};

babel.config.js

module.exports = {
	presets: ['module:metro-react-native-babel-preset', '@babel/preset-flow'],
	env: {
		production: {
			plugins: ['transform-remove-console']
		}
	},
	plugins: [
		['module:react-native-dotenv'],
		[
			'babel-plugin-inline-import',
			{
				extensions: ['.svg']
			}
		],
		'react-native-reanimated/plugin'
	]
};

But these issues are still happening in version 0.68.2.

arrluubuutee avatar Jul 23 '22 02:07 arrluubuutee

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

agrittiwari avatar Jul 25 '22 15:07 agrittiwari

You are probably facing this issue after some changes in your app. I solved it in mine by going to the android folder and running .gradlew clean then running npm ci from the app folder

Judefabi avatar Jul 30 '22 18:07 Judefabi

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.

arrluubuutee avatar Sep 12 '22 04:09 arrluubuutee

I have been solved issue(#32952 (comment)) 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.

Thank you! This worked for me too!

lucasaclima03 avatar Sep 28 '22 14:09 lucasaclima03

npx react-native start --reset-cache 🎉

spaceod avatar Oct 17 '22 10:10 spaceod

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

Manil-SoftNEP avatar Nov 01 '22 04:11 Manil-SoftNEP

"this solved my issue when I was running from Xcode"

1-close Xcode, and the ios simulator 2-in your app cd ios then pod install 3-clean build folder then try to rerun the app

SherifSamirr avatar Nov 11 '22 13:11 SherifSamirr

I'm facing this on expo-go (IOS ) but running on android :(

yourjhay avatar Dec 07 '22 18:12 yourjhay

npx expo start -c this worked in expo

Joyin2 avatar Dec 08 '22 10:12 Joyin2

I had a similar problem: 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

npx expo start -c can not resolve this problem...

likeSo avatar Dec 09 '22 07:12 likeSo

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

faizantariq1 avatar Dec 09 '22 10:12 faizantariq1

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

tanaynaik2001 avatar Dec 09 '22 16:12 tanaynaik2001

same issue here

funfake avatar Dec 10 '22 00:12 funfake

facing this issue on ios. i have changed the simulator or also you can select simulator > Device > "Eraze All Content and Settings" > Erase. After that it's going to work fine for me.

faizantariq1 avatar Dec 22 '22 14:12 faizantariq1

People this error, it's can be alot cases, but, to me I extends a class with React.Component but i write like it 'React.Component()' when i fix it all back to work.

leonardoGasperin avatar Dec 23 '22 02:12 leonardoGasperin