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?

Answer 1

Run the packager with cache-clean: npx react-native start --reset-cache

Answer 2

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.