Fix Error: unable to resolve module './index.android' from ' '

Question

Running into this error trying to build react-native v0.61.5 app with react-navigation on android. iOS runs fine, not sure why im getting this index.android file error because I thought react-native merged index files into just the singlular index.js as the entry point.

this is the full error:

Loading dependency graph, done. Error: Unable to resolve module ./index.android from ``:

None of these files exist: * index.android(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx) * index.android/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx) at ModuleResolver.resolveDependency (/Users/name/Desktop/Development/app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15) at ResolutionRequest.resolveDependency (/Users/name/Desktop/Development/app/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18) at DependencyGraph.resolveDependency (/Users/name/Desktop/Development/app/node_modules/metro/src/node-haste/DependencyGraph.js:282:16) at /Users/name/Desktop/Development/app/node_modules/metro/src/lib/transformHelpers.js:267:42 at Server. (/Users/name/Desktop/Development/app/node_modules/metro/src/Server.js:1088:41) at Generator.next () at asyncGeneratorStep (/Users/name/Desktop/Development/app/node_modules/metro/src/Server.js:99:24) at _next (/Users/name/Desktop/Development/app/node_modules/metro/src/Server.js:119:9)

here's index.js:

import { AppRegistry } from 'react-native';
import App from './App';
import 'react-native-gesture-handler';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

package.json:

{
    "name": "appName",
    "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": {
        "algoliasearch": "^4.0.3",
        "moment": "^2.24.0",
        "moment-timezone": "^0.5.27",
        "react": "16.9.0",
        "react-instantsearch-native": "^6.3.0",
        "react-native": "0.61.5",
        "react-native-agora": "^2.9.1-alpha.2",
        "react-native-algolia-dropdown": "^1.6.0",
        "react-native-calendars": "^1.220.0",
        "react-native-chart-kit": "^4.3.0",
        "react-native-code-push": "^6.0.0",
        "react-native-extended-stylesheet": "^0.12.0",
        "react-native-firebase": "^5.6.0",
        "react-native-gesture-handler": "^1.5.2",
        "react-native-image-crop-picker": "^0.26.1",
        "react-native-material-dropdown": "^0.11.1",
        "react-native-reanimated": "^1.4.0",
        "react-native-safe-area-context": "^0.6.2",
        "react-native-screens": "^1.0.0-alpha.23",
        "react-native-snap-carousel": "^3.8.4",
        "react-native-splash-screen": "^3.2.0",
        "react-native-svg": "^9.13.6",
        "react-native-view-shot": "^3.1.2",
        "react-navigation": "^4.0.10",
        "react-navigation-drawer": "^2.3.3",
        "react-navigation-stack": "^1.10.3",
        "react-redux": "^7.1.3",
        "redux": "^4.0.4",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.3.0",
        "rn-fetch-blob": "^0.11.2",
        "tipsi-stripe": "^7.5.1"
    },
    "devDependencies": {
        "@babel/core": "7.7.5",
        "@babel/runtime": "7.7.6",
        "@react-native-community/eslint-config": "0.0.5",
        "babel-jest": "24.9.0",
        "eslint": "6.7.2",
        "jest": "24.9.0",
        "metro-react-native-babel-preset": "0.56.3",
        "react-test-renderer": "16.9.0"
    },
    "jest": {
        "preset": "react-native"
    }
}

project structure

Libraries are integrated properly, any advice?

@Jim you either install @react-native-community/cli to your app modules by yarn add @react-native-community/cli or use npx to start and run the app, npx react-native start and npx react-native run-android. — Christos Lytras
react-native-cli has zero effect over this stop with that suggestion. because changing does absolutely nothing. — Jim

Rishi Sahu Rishi Sahu · Accepted Answer · 2020-03-09T12:55:08

It's throwing error because it's not able to find index.android file in your root directory of project , if you have index.ios in your project

You can you create index.android.js file and in that import original index.js file and check if it works (quick fix)

So Basically After React v0.49, you don't need index.ios.js and index.android.js. You only need the index.js:

But There are two cases when this issue arise

If you are updating from an old project you need to make sure the correct files are loaded from native code to adopt the new single file entry point.
And second is inconsistent behaviour of react native as some people randomly getting this issue in newer version because of watchman or cache

Solution for first case

//For android in this directory you need to make this change android/app/src/main/java/<yourPackage>/MainApplication.java

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  //...
  @Override
  protected String getJSMainModuleName() {
    return "index";
  }
};

//and for ios in this directory ios//AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  //...
}

These two solution also works in some cases

watchman watch-del-all && rm -rf package-lock.json && rm -rf node_modules && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-map-*

or

remove index.ios.js and index.android.js files and create a single index.js

There are certain scenarios so it's hard to determine why anyone is getting this issue.

Fix Error: unable to resolve module './index.android' from ' '

3 Answers