When I run my react-native app with Xcode, and after the app starts to load, I see this error:
"Requiring unknown module "react". If you are sure the module is there, try restarting the packager."
My package.json contents are:
{
"name": "the_golf_mentor",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react-native": "^0.21.0",
"react-native-button": "^1.4.2",
"react-native-cookies": "^0.0.5",
"react-native-db-models": "^0.1.3",
"react-native-navbar": "^1.2.1",
"react-native-side-menu": "^0.18.0",
"tcomb-form-native": "^0.3.3"
}
}
I have tried restarting the package manager, and I have also removed the node_module folder and done a fresh npm install. How do I fix this problem?
I had this after enabling hot reloading, and then downgrading my react version to support a library I was using.
Simulator > Reset Content and Settings
Got it running again.
In React Native React lives in react-native module instead of react (for React JS). In that case import React and other React Native modules via:
import React, {
Component,
View,
Text,
// other React Native modules
} from 'react-native';
I encountered the same error. I closed down IDE and restarted, it worked for me. If nothing works out, try npm install
You should require React from react-native in a react-native project, and not from react.
var React = require('react-native');
It turned out that the error message was an interim one I was receiving in the debugger. When I pressed continue a couple of times in the debugger, I received a message in the simulator window which indicated I had not registering the app properly, i.e. my AppRegistry.registerComponent call was invalid.
I suspect this was an unusual cause of the unknown module 'react' error message. In many cases, neciu's answer is probably more useful, so I have also upvoted it as well.
I had similar issue: "Error: Requiring Unknown module 3" after installing '#react-navigation/native', so I did the following to fix it:
Close everything (Metro, Debugger and Simulator)
npm install
npx pod-install ios (On Mac)
npm run ios
and that's it!
Related
I created a React Native Project using React Native CLI then installed expo as mentioned in the documentation here
I used the Automatic Method and ran npx install-expo-modules#latest
After that I ran npx pod-install then npx react-native run-ios
But I am getting the following error after that,
I have the following dependencies,
"expo": "^47.0.0",
"react": "18.2.0",
"react-native": "0.71.1",
What am I doing wrong here?
I had the same issue and I just needed to add a distribution certificate to the MacOS key chain, this person's issue on GitHub gives you a good idea on how to do it: https://github.com/expo/eas-cli/issues/1331. I highly recommend viewing the post by KiwiKilian. You can access it here
After adding the certificate to the keychain, the error just went away for me.
Useful resources
https://support.apple.com/en-au/guide/keychain-access/kyca1083/mac
https://support.magplus.com/hc/en-us/articles/203808748-iOS-Creating-a-Distribution-Certificate-and-p12-File
https://developer.apple.com/forums/thread/662300
https://developer.apple.com/support/expiration/
Hope it helped!!
I have android and ios app in react native which both uses webview to show webpage as application.
Since I had to change package name to deploy it on google play since first one package name was occupied. I changed app.json file and all names in android folder and that's ok.
Now my question is what I need to change in my ios folder in order to my app work in xcode. I have this error.
Invariant Violation: "RestApp" 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.
This is my app.json file
{
"name": "restapphhopp",
"displayName": "RestApphhopp"
}
Index.js file
/**
* #format
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
The issue here is with the name you are using for your app
Invariant Violation: "RestApp" 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.
your index file is using the appName from app.json name field to register your component, which in your case is "name": "restapphhopp"
change your moduleName in ios AppDelegate.m file to restapphhopp
moduleName:#"restapphhopp"
Name in the app.json should be the same as the name in package.json
recheck your name is same in app.json and in strings.jsx file
if using expo
delete node_modules and your lockfile (package-lock.json / yarn.lock)
run yarn or npm install
run expo install react-native-safe-area-context
I also needed to edit this line in AppDelegate.mm
UIView *rootView = RCTAppSetupDefaultRootView(bridge, #"YOURAPPNAME", nil);
After updating this, in addition to all other steps, I then ran
npm start --reset-cache
Open new terminal:
cd ios
pod install
npm run ios
Hope this helps someone!
I had this issue when I used a boilerplate for react-native and I had to change the name 'template' for 'theNameOfMyCurrentProject' with npx react-native-rename "the Name Of My Current Project" . After that I had to replace manually in AppDelegate.mm 'template' for 'theNameOfMyCurrentProject' . And that's it!
First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."
npx react-native start
Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
npx react-native run-android
I've been trying to build google maps on my ios React Native emulator but an error appeared saying that AIRrgooglemap dir must be added to Xcode which it has.
I researched ways to make it work such as this link https://cuneyt.aliustaoglu.biz/en/using-google-maps-as-provider-in-ios-with-react-native/ and others and started implementing and changing files on Xcode with no results. Below are the errors seen in React Native IOS emulator and Xcode build
React Native IOS error:
[
Xcode Error:
Thank you
For your question on iOS, I checked the relevant documentation, there should be some steps missing, I suggest you use the following steps:
1.npm install react-native-maps --save
2.react-native link react-native-maps
3.Download the GoogleMaps library, copy it to the ios folder, and link the framework and configuration .bundle resources in Xcode as shown.
4.Configure the package.json file.
"scripts":{
"start": "node node_modules/react-native/local-cli/cli.js start",
"postinstall": "./node_modules/react-native-maps/enable-google-maps 'ios/GoogleMaps-3.1.0/**'", },
5.npm install
6.Configure the code in AppDelegate.m.
7.Write the react-native code.
I made a sample project myself, you can refer to release v0.0.1.
I'm running an app in Expo XDE and get the following warning:
Expo XDE warning screenshot
The link in the warning just takes you to the Expo docs. I looked through them and it looks like it might have something to do with my app.json file.
My app.json only contains:
{
"expo": {
"sdkVersion": "15.0.0"
}
}
Anyone have any ideas how to get rid of this warning? I'm working in "development mode" (Expo IDE setting) on iOS/mac
Used react-native from expo like this in package.json:
"react-native": "https://github.com/exponent/react-native/archive/sdk-16.0.0.tar.gz",
A new project created with the latest version of react-native throws javascript error while running(/debugging). Tested this on simulator.
[fatal][tid:main] TypeError: babelHelpers.typeof is not a function. (In 'babelHelpers.typeof(target)', 'babelHelpers.typeof' is undefined)
Installed the react-native client today & created the app using
react-native init AwesomeProject
App version:
react-native-cli: 0.1.10
react-native: 0.20.0
node version: v5.6.0
Here's a comment explaining the issue:
https://github.com/facebook/react-native/issues/4844#issuecomment-204035720
To summarize:
Babel presets 'stage-0' through 'stage-3' contain 'async-to-generator', which is not not necessary for react-native itself.
The solution is to use the unofficial babel preset 'react-native-stage-0'
Example:
npm install babel-preset-react-native-stage-0 --save-dev
.babelrc
{
"presets": ["react-native-stage-0"]
}
or with decorator support
{
"presets": ["react-native-stage-0/decorator-support"]
}
Empty cache and Restart
watchman watch-del-all
./node_modules/react-native/packager/packager.sh start --reset-cache
Solved adding babel stage-1 and react-native preset's to .babelrc in the project's root folder.
{
"presets": ["stage-1", "react-native"],
}
More details here: https://github.com/facebook/react-native/issues/5747
To solve the problem, I renamed a .babelrc file in a parent directory, then ran ./node_modules/react-native/packager/packager.sh start --reset-cache
One issue is that if there is a .babelrc in a parent directory to your app, the packager will read that and it will cause this exact error. One way around it is to add a .babelrc file in your project:
{
"presets": ["react-native"]
}
I updated to the newly released react-native#0.21 and the issue went away. I am not sure if this means the root issue has been resolved since I have seen intermittent success with other "fixes".
Double check your import path/file names as they are case sensitive
It's usually due to a 3rd party npm dependency that has .babelrc or babel es2015 preset specified in it's package.json.
There's a fix in place: https://github.com/facebook/react-native/pull/11093