CODEWITHSUNDEEP
androidreact-native
arunmenon
arunmenon

Reputation: 582

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

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:

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

Upvotes: 5

Views: 35805

Answers (3)

suranga upul
suranga upul

Reputation: 249

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

Upvotes: 0

Shan
Shan

Reputation: 604

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

Upvotes: 3

Sandy.....
Sandy.....

Reputation: 2870

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

Upvotes: 14

Related Questions