React Native error 'Unable to resolve module `react-native` ' - android

I am attempting to learn React Native so I went ahead and followed all the steps in the Getting Started guide at the official documentation site. I have some experience with React so i wanted to expand on it.
I did wade in around 6 months ago for a simple 'hello world' app and everything worked fine for me on both the Android emulator and the IoS simulator. Did test on my device as well and had no issues. Since i got busy with other work i did not get back to it until now.
The error i get when i attempt the react-native run-android command:
Metro Bundler ready.
Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `react-native` from `/Users/arunmenon/Sites/reactnative/website/index.js`: Module `react-native` does not exist in the Haste module map or in these directories:
/Users/arunmenon/Sites/reactnative/website/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 /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`. 4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
at ModuleResolver.resolveDependency (/Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:161:1460)
at ResolutionRequest.resolveDependency (/Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:91:16)
at DependencyGraph.resolveDependency (/Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)
at dependencies.map.relativePath (/Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)
at Array.map (<anonymous>)
at resolveDependencies (/Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)
at /Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33
at Generator.next (<anonymous>)
at step (/Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)
at /Users/arunmenon/Sites/reactnative/website/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473
BUNDLE [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
I tried all the suggested steps but the issue still persists. The error:
Error: Unable to resolve module `react-native` from `/Users/arunmenon/Sites/reactnative/website/index.js`:
Module `react-native` does not exist in the Haste module map or in these directories:
/Users/arunmenon/Sites/reactnative/website/node_modules
suggests that it looks like somehow there is some issue with picking up the path from node_modules. The first line in index.js is import { AppRegistry } from 'react-native'; and thats where the error is thrown.
The paths mentioned are valid and i do have react-native installed in the node_modules directory in the path.
I am developing on a Mac and the targeted device currently is Android. I am going the react-native CLI command route and not the create-react-native-app route.
I have Android Studio 3.1.3 (updated last night), Node 8.11.2, NPM 6.1.0, Watchman 4.9.0 (installed via Homebrew), Java JDK 1.8.0_144.
I followed the getting started guid to a T. Since i got t working earlier - around 6 months ago - i wonder why i get this now. I have the same Android Studio version as then(i updated Android Studio yesterday to rule out issues with having an older version. I get the same error with the new version as well) The difference between then and now:
React-native library version has obviously been bumped up from then
Java version, i recently updated it to the latest
Node and NPM versions are newer
Watchman also i think since Homebrew did update it
Everything else is the same. I tried a couple of fresh install as well - starting over from the beginning i.e but it didnt work.
My package.json:
{
"name": "website",
"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"
},
"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"
}
}

Please remove all react-native specific folders from "%appdata%\Temp" and then try below commands:
cd android
gradlew clean
cd.. and remove the node_modules folder
npm cache clean --force
npm install
npm start -- --reset-cache
react-native run-android

The above didn't work for me on Mac OSX, but this one did: after npm install, run these:
# Clean cache
rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all
# Start React-Native directly
react-native start --reset-cache
# Now run android/iOS in another tab
react-native run-android
Original post: https://github.com/facebook/react-native/issues/21490#issuecomment-427240356

In my case problem was newly installed package. so try with uninstall the npm package which you newly installed. npm uninstall --save

Related

Error: Unable to resolve module 'XXXXX' could not be found within the project

I'm keep getting this error whenever I try to install any npm package on my windows 10 for android. It shows the package added in android studio and node_modules as well. However when i import the npm package in JS file and run the project the error comes up. With the below instructions :
If you are sure the module exists, try these steps:
Clear watchman watches: watchman watch-del-all
Delete node_modules: rm -rf node_modules and run yarn install
Reset Metro's cache: yarn start --reset-cache
Remove the cache: rm -rf /tmp/metro-*
Does anyone knows what i'm doing wrong? I'm using react-native 0.63.2
It means the metro bundler does not know there is a new package installed. In that case, turn off the metro bundler and follow the steps you listed above and then npx react-native run-android. Those steps clear the cache and help metro find the new package that was installed.
Check in any of the files you were working on recently and be sure you are not mistakenly importing XXXXX somewhere, in my case it was process as shown in the image above. Most times it happens when you invoke a function or method within your module

Unable to resolve module `./Linking/Linking` from `node_modules/expo/build/ExpoLazy.js`

Has anyone experience this error with expo, when running react-native run-android?
error: bundling failed: Error: Unable to resolve module `./Linking/Linking` from `node_modules/expo/build/ExpoLazy.js`:
None of these files exist:
* node_modules/expo/build/Linking/Linking(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
* node_modules/expo/build/Linking/Linking/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
"expo": "^37.0.9",
Just ran into this issue, downgrade to 37.0.8 (no caret) and do an npm i. Looks like they released 37.0.9 yesterday and it has an issue.
What worked for me:
1) In package.json change to "expo": "37.0.8"
2) Delete your node_modules
3) installl packages npm i
4) clean cache in expo expo r -c
Now it started to work again. Couldn't find the last step in previous comments.
This is an Internal bug of react-native. You don't have much of a choice, as user3916570 consider downgrading.
For now, downgrading Expo to 37.0.8 fixed this. To downgrade, in your package.json, change your Expo dependency to:
"expo": "37.0.8",
Then remove your node_modules and reinstall everything:
rm -rf node_modules
npm i
It's not an expo version problem only, you should also check the global expo-cli version and probably node as well.
Run:
$ npm install -g expo-cli --force
$ rm -rf node_modules/
$ rm -rf package-lock.json
# (in my case mac '$ brew upgrade node && npm install -g npm')
$ npm install
$ npm run

Error during launch of an Android emulator

I don't understand why I have this problem when I launch the emulator.
warning: the transform cache was reset.
Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `react` from `/Users/myname/Sites/Project/App.js`: Module `react` does not exist in the Haste module map
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 /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
I start the server with npm start -- --reset-cache command but it doesn't work. And also I tried to follow the above instruction.
How can I do?
I don't believe that it is a code problem, I update my Android Studio and install a component (react native elements) and now it doesn't work anymore.
Some help?
I solved by installing in the application folder:
npm install react

npm WARN react-native-maps#0.14.0 requires a peer of react#>=15.4.0 but none was installed

Problem
I'm trying to install react-native-maps by Airbnb in my project. Installation instructions:
airbnb/react-native-maps/installation
When I run the following command in cmd: npm install react-native-maps --save
This is what I get:
`-- react-native-maps#0.14.0
npm WARN react-native-maps#0.14.0 requires a peer of react#>=15.4.0 but none was installed.
Ignoring this if I proceed with further installation, and run the following command: react-native link react-native-maps
This is what I get:
Scanning 561 folders for symlinks in C:\RNProjects\Mapp\node_modules (39ms)
rnpm-install info Linking react-native-maps ios dependency
rnpm-install info iOS module react-native-maps has been successfully linked
^As we can see, only iOS related maps modules get installed. On checking the project directory, I was able to validate that no android related module was installed.
Troubleshooting
Here's the list of thing I tried to resolve the issue, but none of them worked.
Tried installing npm install react#15.4.0 --save
Got these warnings:
npm WARN react-native#0.43.3 requires a peer of react#16.0.0-alpha.6 but none was installed.
npm WARN react-test-renderer#16.0.0-alpha.6 requires a peer of react#^16.0.0-alpha.6 but none was installed.
So, in order to resolve this, I tried installing react#16.0.0-alpha.6 with: npm install react#16.0.0-alpha.6.
I got the same message again:
npm WARN react-native-maps#0.14.0 requires a peer of react#>=15.4.0 but none was installed.
Tried updating react-native npm update react-native.
Still getting the same warning message.
Tried installing the latest version of npm: npm install npm#latest -g.
Didn't work.
Additional Information
react-native: 0.43.3
react-native-cli: 2.0.1
Platform: Android
Development Operating System: Windows 10 OS
Here's how I was able to solve this (chronological order):
Deleted node_module directory from the project
npm cache clean
Modified package.json with: "react":"~15.4.1"; "react-native":"0.42.3"; "react-test-renderer":"15.4.1"
npm install all module
npm install
npm i react-native-maps#0.12.5 --S
react-native link react-native-maps
Once I do this, it's successfully able to link the android and ios react-native-modules to the project.
Note: Before running the react-native run-android command,
Run: cd android && gradlew clean && cd .. && react-native run-android.
This will clean the gradle before running and help in avoiding any errors.
You can try:
delete node_module, npm cache clean;
modify package.json
"react": "~15.4.1","react-native": "0.42.3","react-test-renderer": "~15.4.1",
npm install all module;
done ;)
Here is how i was able to solve this same issue:
I deleted the node_module folder (You can verify npm cache: npm cache verify)
I actually changed the package.json file to the following:
"react": "~15.4.1","react-native": "0.42.3","react-test-renderer": "~15.4.1"
But that triggered other error on my side; So i put them back to their initial
values:
a. "react": "17.0.1",
b. "react-native": "0.64.0",
c. "react-test-renderer": "17.0.1"
npm install all module
npm install
npm audit fix --force
npm i react-native-maps#0.12.5 --S
react-native link react-native-maps
At this point I opened 2 terminals:
a. Terminal 1: react-native start
b. Terminal 2: react-native run-android or yarn android

react-native run-android is unrecognized

I've installed react-native-cli globally:
npm install -g react-native-cli
Then run:
react-native init AwesomeProject
cd AwesomeProject
I got the following structure:
-- AwesomeProject
---- node_modules
------ react-native
When I run react-native run-android I get an error:
Command run-android unrecognized. Did you mean to run this inside a react-native project?
When I run react-native start I get the same.
react-native -v
prints:
react-native-cli: 0.2.0
react-native: n/a - not inside a React Native project directory
What I'm doing wrong?
the answer is easy nad it is not because of any bug at all.
make sure you are in correct directory
if in current directory there is not any react native app ,it gives you this error
What caused this for me was running npm install --save [package] when actually the system has previously been using yarn instead of npm.
To solve this I just deleted the node_modules folder and ran: yarn install and after that react-native run-ios (or android) works fine.
(This is a duplicate of React Native: Command `run-ios` unrecognized)
I just ran "yarn" with no arguments and it fixed it.
Please try this command:
npm install --save react-native
The problem was that I terminated init command because it looked like hanged without errors (even 24 hours later). To fix this I updated nodejs and npm to newer versions. Once I have done it react-native init was executed properly and there is no more problem with react-native run-android.
react-native run-android is unrecognized
Make sure that you have installed npm or use
in your project directory
npm install
you have to update your npm.
To do that
npm install npm#latest -g
try "yarn install".
It will install the missing files in node_modules
It worked for me
This can be caused by a couple of issues.
!!! Before trying each solution remember to open a new terminal since you might have old paths sources from your .bashrc file. !!!
You did not install the contents of the project. In order to solve this you have to install the node_modules by typing:
npm install or yarn install
You are coming back to a previously installed project after doing some funny things with your react-native installation and global configurations. (Upgrading the library, upgrading node doing something with globally installed node_modules).
You should clean all your caches and project modules
Here you can find a command to do all these things in one line (remember to replace npm with yarn accordingly):
https://gist.github.com/jarretmoses/c2e4786fd342b3444f3bc6beff32098d
Your global installation of react-native or react-native-cli is broken. In this case simply reinstall your libraries globally.
npm: npm install -g react-native && npm install -g #react-native-community/cli
yarn: yarn global add react-native && yarn global add #react-native-community/cli
I think the command you are looking for is react-native run-android.
cd into your project and run this command where all you js files are present and not in the android folder.
It will run a package manager, do not close that. Also you need to have an emulator or a device connected to your computer with usb debugging enabled.
Hope the answer helped
npx react-native run-android
Use of npx will pick local npm node_modules directory
Do npm install then run react-native run-android
Make sure you go into the directory having package.json
If you have deleted nodemodules try "npm install".
And don't forget the "init" in "react-native init MyApp". "init"
initializes the package.json.
Step 01 : Make sure that you are in right directory
Step 02 : npm install run this command
Step 03 : npm audit fix run this to fix issues
Try deleting node_modules folder and then run the commands again
You can solve this by yarn or npx:
yarn react-native run-android
npx react-native run-android
Everything has already tried like me? Then try again once "Yarn install after deleting node_modules". It worked for me.
I did everything correct while setting up, but was unable to run the android code. Just make sure while running the command react-native run-android that, you are inside the AwesomeProject folder created by the react-native init AwesomeProject command.
The folder by default for my PC was under C:\Windows\system32\AwesomeProject in Windows.
Hope it helped for the first timers :)
You need to update the project with the latest version of react-native. Just run this command.
npm install --save react-native#latest
If you guys have latest react native version and facing this error
"UNRECOGNIZED COMMAND run-android".
then run follow these steps it will definitely help you.
Step: 1 -> create a new file "react-native.config.js" in the project root directory.
Step : 2 -> Inside "package.json" you have "assets" array inside "rnpm" object cut these assets from this and paste in your "react-native.config.js".
i-e:
module.exports = {
assets: ['./assets/fonts'],
}
Step : 3 -> Remove "rnpm" object from "package.json".
Step : 4 -> Replace your "scripts" with below mentioned "scripts" inside "package.json"
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"android:prod": "npx react-native run-android --variant=release",
"ios:prod": "react-native run-ios --configuration Release"
}
That's it
Happy Hacking..............
Uninstall react-native from global
$ npm uninstall -g react-native
Then
Install react-native to global
$ npm install -g react-native-cli
That worked for me
react-native run-android
start [options] starts the webserver
run-ios [options] builds your app and starts it on iOS simulator
run-android [options] builds your app and starts it on a connected Android emulator or device
new-library [options] generates a native library bridge
bundle [options] builds the javascript bundle for offline use
unbundle [options] builds javascript as "unbundle" for offline use
eject [options] Re-create the iOS and Android folders and native code
link [options] [packageName] links all native dependencies (updates native build files)
unlink [options] <packageName> unlink native dependency
install [options] <packageName> install and link native dependencies
uninstall [options] <packageName> uninstall and unlink native dependencies
upgrade [options] upgrade your app's template files to the latest version; run this after updating the react-native version in your package.json and running npm install
log-android [options] starts adb logcat
log-ios [options] starts iOS device syslog tail
dependencies [options] lists dependencies
info [options] Get relevant version info about OS, toolchain and libraries
They have made some unnoticeable changes. For instance run-android(now) run android(before).
Try to delete "package-lock.json" and re-run "npm install", then try your command, It should work
I got this error because I had parenthesis in the path "(" and ")". Possibly this error is thrown for other special characters as well.
Ensure you run the command in the projects' terminal, preferably the Android IDE. Run the adb devices to know your active devices as well
If your package.json file is containing any comment then this error is comes. So remove all comments from package.json and then run command it will work.
Also try to run command npm install --save then it will log if other error there. If any others error also there, then first fix it and then run command it will work.
In Android Studio click in Tools -> SDK Manager -> in System Settings click in Android SDK -> choose tab SDK Tools, then enable Android SDK command line tools (lasted).
It work for me!
Open your React Native Project Root Directory and locate android -> app -> build -> intermediates -> signing_config -> debug -> out -> signing-config.json
Delete signing-config.json file
And rebuild your application.
react-native run-android
First thing you need to delete node_mouldes and package.lock.json and do yarn install after that if you're using Windows OS you need to use PowerShell not git bash and write this command "react-native run-android"
Install npm again to latest
react-native init project_name
cd project_name
open android studio the same android folder inside your project_name
react_native run_android
will work now
for the last time your project was working fine and now you got this error suddenly and you have Node modules already installed then just trynpm install --save react-native
this work for me

Categories

Resources