I'm new to React-Native and use the Expo xde GUI. I had no problems up to the point, I wanted to use external modules at. I installed them using npm install module. Next I wanted to import them into my App.js file using import Module from 'module' But after starting the project I got the following error in the Expo Client App on the iOS Simulator:
Unable to resolve module react-renderif from /Users/my_name/Desktop/ExpoProjekte/test/App.js: Module does not exist in the module map or in these directories:
/Users/my_name/node-modules
This might be related to
https://github.com/facebook/react-native/issues/4968 To resolve try
the following:
1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset Metro Bundler cache: rm -rf $TMPDIR/react-* or npm start -- --reset-cache. 4. Remove haste cache: rm -rf $TMPDIR/haste-map-react-native-packager-*.
ABI25_0_0RCTFatal
37-[ABI25_0_0RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE
__CFRunLoopRun CFRunLoopRunSpecific GSEventRunModal UIApplicationMain main start 0x0
I tried all tipps mentioned in the error message, but nothing helped. I also tried out many workarounds described on the internet (e.g. in this forum), but this also didn't lead to success. The problem occurs with all modules that I tried to install and to import, e.g. react-renderif and native-base.
Do you have any ideas how to solve this problem? I know that the question was asked several times in this forum, but the answers didn't help me, maybe because they only worked for older versions.
Regards,
Paul
Desktop operating system: MacOS Sierra (10.12.6)
Expo version: 2.22.1
npm version: 4.6.1 and 5.6.0 (I tried out both)
My package.json:
{
"name": "my_name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"native-base": "^2.3.10"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Try
react-native upgrade
or, react-native-git-upgrade
Note: Use this only if u have no way out since .It will clear all the changes you did in ios and android folder rest will remain the same.
Related
When I run the react native project with react-native run-ios.It shows the following error on my iOS simulator.On my android simulator, it is totally ok.I have deleted node module and reinstalled.But the error is still there.I don't want to entirely delete my ios/build folder since I have manually added library dependencies in there and that third party libraries were working properly in my react native project.Can someone help me with this?
Error Message
Requiring unknown module "11".If you are sure the module is there, try
restarting Metro Bundler.You may also want to run yarn or npm install(
depending on your environment ).
package.json
{
"name": "AwwsomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-navigation": "^1.1.473",
"react-native-vector-icons": "^4.6.0"
},
"devDependencies": {
"babel-jest": "23.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "23.2.0",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
Restarting packager fixed my issue.
I fixed the issue with the instructions from the following page:
https://facebook.github.io/react-native/docs/troubleshooting#content
Basically it asks you to terminate the processes running on a specific port.
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
Then run the following to terminate the process:
$ kill -9 <PID>
I just killed all node processes
killall node
🙌 and launched again
I had the same problem. Running npm install or yarn install should fix the issue.
I had the same problem while working with my react native app and expo. Same screen with 'Requiring Unknown Module 1".
This is how I fixed it:
I closed Expo
I closed the Metro bundler on my local host
I closed the packager on my terminal with Ctlr + C
I restarted with npm start
I relaunched the project on Expo.
It worked for me.
I had this issue on Android (React-Native-CLI).
Terminating the application and restarting metro server absolutely solved the issue.
yarn react-native start
Using yarn, I did the following (for Android emulation):
From root directory in your project:
cd android
./gradlew clean
cd ..
yarn start --reset-cache
yarn android
Looks like node and the application inside simulator hangs sometimes. I encountered this several times on macOS / iOS.
yarn install did not help.
restarting simulation with expo run:ios / yarn start / yarn ios did not help.
What helped was killall node and killall <your_mobile_app_name>.
npm run ios fixed for me after npm start
I have created a React Native Project and I was trying to open that project in Expo XDE. It throws the following error:
Cannot find module ...\node_modules\expo\tools\LogReporter
Firstly I created a React Native project by cloning a KitchenSink Project.
Link:
NativeBase-KitchenSink
When I started the project by issuing series of commands inside the project root directory:
npm install and then expo start
I saw that the app.json was also not proper, which was the following:
{
"name": "NativebaseKitchenSink",
"displayName": "NativebaseKitchenSink"
}
After issuing expo start react-native reported that the app.json is not to be found in the current directory.
[17:05:08] Starting project at
D:\Projects\ReactNativeProjects\AwesomeProject [17:05:10] Error:
Missing app.json. See https://docs.expo.io/ [17:05:10] Couldn't start
project. Please fix the errors and restart the project. [17:05:10]
Error: Couldn't start project. Please fix the errors and restart the
project.
at C:\xdl#51.4.0\src\Project.js:1565:11
at Generator.next ()
at step (C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:191)
at C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:361
at process._tickCallback (internal/process/next_tick.js:68:7)
I changed app.json to:
{
"expo": {
"name": "AwesomeProject",
"description": "A Kitchen Sink project.",
"slug": "AwesomeProject",
"privacy": "public",
"sdkVersion": "30.0.0",
"platforms": [
"ios",
"android"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.abhsax.first"
},
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/logo.png",
"splash": {
"image": "./assets/splashscreen.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
]
}
}
There were some updates in the project when I issued npm install again. Then I issued:
expo start
This error came:
(node:2044) UnhandledPromiseRejectionWarning: Error: Cannot find
module
'D:\Projects\ReactNativeProjects\AwesomeProject\node_modules\expo\tools\LogReporter'
Why am I getting this error, and how can I fix it?
check your package.json if it contains all needed dependencies and run npm install in the home directory of the project
if a package is missing you can add it with
npm install <package_name> --save
if you are using yarn run:
yarn add expo
I did:
yarn add expo
and it worked for me =)
See docs:
introducing-button-yarn-and-a-public-roadmap
and
npm-vs-yarn-in-react-native
These documents say that since the project configured using Yarn, you have to follow Yarn way. [Note: There is a file yarn.lock inside the root directory of the project, you have posted]
Therefore such projects are dealt by following the instructions in the documentation.
Please see How do I create a React Native project using Yarn? to actually create a react-native project using Yarn.
And please be sure to remove node_modules folder and issue command npm install before adding react native CLI using yarn. You have to remove package-lock.json from your project root. This will be to prevent mixing different package managers : npm and yarn.
Instead, it will be a good idea not to use npm, and in order to generate node_modules, just issue command:
yarn
Last link recommends to install every package you need using yarn, and not to use any other package manager:
yarn global add react-native-cli
to add react-native:
yarn add react-native
to add missing packages:
yarn add react-base --save
and to install expo using yarn:
yarn add expo
install expo-cli
yarn add expo-cli
It is possible that you can do without Expo. Just focus on react-native and yarn.
Generate android and ios folders:
react-native eject
Start yarn:
yarn start
run build of your choice, and make sure the SDKs are installed.
react-native run-android
Please also see: Uncaught TypeError: Cannot read property 'forEach' of undefined, on a KitchenSink demo
Happy Coding :-)
Install the Expo modules
npm install --save
i.e.
npm install expo --save
rollback with npm install -g expo-cli#2.4.3
I face with a problem when try to use npm install to install redux to my react-native project. Any time I do run npm install redux --save the react-native directory inside node_modules will be cleared.
Then I use rm -rf node_modules && npm install the all react-native package does not install inside node_modules so I must re-create project.
I also try to copy & past react-redux and redux in node_modules from another project to my current react-native project. But it can't success, the error lead me to the issue on github. I followed this help and it also fail.
Some other information:
➜ npm: 5.0.3
➜ react-native-cli: 2.0.1
➜ react-native: 0.45.0
➜ package.json
{
"name": "MyProjectNAME",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.45.0",
"react-redux": "^5.0.5",
"redux": "^3.6.0"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-jest": "20.0.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react-native": "1.9.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
Any suggest is appreciated. Thank you
Glad you have solved this issue using a workaround way but please allow me to explain why react-native module was removed when you ran npm install redux --save.
Solution:
Move the package-lock.json out of the project folder (Don't delete it yet because you will need to inspect it later on)
Run rm -rf node_modules && npm install
Check the /node_modules and react-native should be there now
Run npm install redux (npm v5 will --save by default) to install redux without having existing modules get removed
What is package-lock.json?
There are a bunch of changes for npm v5 which you can read it here. One of them is generating package-lock.json (lockfile) whenever npm modifies /node_modules or package.json.
With package-lock.json, anyone who runs npm install (v5) will get the exact same node_modules tree that you were developing on. So, you would have to commit this file too.
Why react-native module and others were removed after running npm install somePackageName even they are defined in the package.json?
The removal happened because of your existing node modules were installed prior to npm v5. If you use npm v5 to install a module (e.g. npm install redux), you will notice three things:
package-lock.json will be generated (or updated if exists). Redux and its dependencies are saved into it.
The redux's package.json is different than node modules that were installed prior to npm v5 (some extra fields prefix with _ e.g. _from, _requiredBy, _resolved etc.).
Finally, any module installed prior to v5 will be removed which I guess due to the missing extra fields in its package.json AND does not exist in the newly generated package-lock.json.
So, running rm -rf node_modules && npm install again will not solve the issue because of the package-lock.json file (Remember only redux and its dependencies were saved to the file? You can check the old package-lock.json)
Hope this might help someone else.
Finally, I solved this problem by 2 steps:
1) Create a reactjs project and install redux
2) Copy all content of node_modules in step 1 and paste to my current react-native project.
Reload app. Everything works well.
It gets removed if you create app using yarn. If you have created the app using yarn please run yarn add react-redux instead of npm install react-redux
I am just trying to spin up a new react-native app but no luck.
react-native init NewApp
cd NewApp
npm install
react-native run-ios
Then see the below error:
** BUILD FAILED **
The following build commands failed:
CompileC /Users/arc/Desktop/websites-dev/react-native/testing_rn/ios/build/Build/Intermediates/React.build/Debug-iphonesimulator/React.build/Objects-normal/x86_64/RCTProfile.o Profiler/RCTProfile.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
Installing build/Build/Products/Debug-iphonesimulator/testing_rn.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/testing_rn.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Using:
npm 4.1.2
node v7.5.0
El Capitan 10.11.6
Xcode 8.2
package.json:
{
"name": "testing_rn",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "15.4.2",
"react-native": "0.42.3"
},
"devDependencies": {
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "19.0.2",
"react-test-renderer": "15.4.2"
},
"jest": {
"preset": "react-native"
}
}
It seems like this may be related to the build via terminal but app may still work in xcode?
Print: Entry, ":CFBundleIdentifier", Does Not Exist have tried most solutions
github issue from 25 days ago:
https://github.com/facebook/react-native/issues/12737
Some related questions:
https://github.com/facebook/react-native/issues/7308
React-native run-ios commands fails
=========================================================
UPDATE:
For me, this seemed to have something to do with 0.42.0 and above. I can run a 0.41.2 project that I install with
react-native init --version 0.41.2 example412
cd example412
npm install
react-native run-ios
And boom. It works. But this gets errors:
react-native init example_latest
cd example_latest
npm install
react-native run-ios
then above errors are back. Same errors with init version at 0.42.0:
react-native init --version 0.42.0 example420
cd example420
npm install
react-native run-ios
For me, I guess I needed to update xcode. I thought I was on 8.3 but apparently not. I also needed to update osx to 10.12.4 prior to updating my xcode. Now I'm all good and running a react-native init app at 0.42.3
I am unable to create a new React Native project via react-native init <ProjectName>.
This is the first time I've tried since upgrading to macOS Sierra, but I don't know if that's related.
If I run the command with the --verbose flag, it runs through all the npm packages, but then eventually outputs the following:
├── UNMET PEER DEPENDENCY react#~15.3.1
<List of other packages including react-native 0.34.1>
npm WARN react-native#0.34.1 requires a peer of react#~15.3.1 but none was installed.
npm verb
npm verb If you need help, you may report this error at:
npm verb <https://github.com/npm/npm/issues>
npm verb exit [ 0, true ]
npm info ok
It then just sits there indefinitely. Last time I created a react native project it would take maybe 20-30 seconds max, but now it never completes (after say 10-15 minutes).
If I kill the process, all I have is a package.json with just the following in:
{
"name": "TestApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react-native": "0.34.1"
}
}
...and the node_modules folder containig react-native and its dependencies. None of the required XCode/Android folders are there, or the index entry points, configs etc.
I have tried reinstalling all the required dependencies (node, homebrew) and I have also reinstalled git via homebrew.
I've seen other threads that suggest manually installing React, but I don't buy it. This used to work and React used to get installed as part of the process, but now I get this warning and it's game over.
Anyone else seen this issue?
EDIT
I just tried this on my other Mac, also running macOS Sierra and it worked fine. I followed the same steps on that to ensure all my dependencies were up to date first. I did a verbose init and still got the warning about React 15.3.1 being missing, but it then carried on and install Reacrt 15.3.2 and then set up all the XCode/Android project files.
Very odd/annoying as I really need to start putting something together on this Mac.
SECOND EDIT
If I create a new user account on my Mac and log in as that, I can create a project, so it seems to be user-specific. Although annoying, I don't mind setting a new account up, but before I do would like to see if anyone can offer any suggestions. Thanks.
So the issue turned about to be watchman, as outlined here: https://github.com/facebook/react-native/issues/9943
If I ran watchman version the terminal hung, so as per the instructions I did:
rm -rf /usr/local/var/run/watchman/ && brew uninstall watchman && brew install watchman
...and it worked a treat!