React Native Error: Unable to resolve module `./index` from `` - multiple issues

Question

I use this boilerplate. I nearly got React Native working on my Android device. But somehow it fails in the last step because it does not find an index.js file. But that file is located in my project.

So when I now run this in src/

yarn react-native run-android

this is the Node CLI window:

So my issue is:

Error: Unable to resolve module `./index` from ``:

None of these files exist:
  * index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

From the console itself I cannot see any issue:

So somehow it does not find the index.js file for some reason.

I already tried yarn react-native start -- --reset-cache but it did not change anything.

Edit #1:

When I add a fake empty index.js file on root folder, the error is gone and in the emulator I get this one:

Edit #2:

I'm getting nearer to a solution. I just added this to the fake index.js in the root:

import {AppRegistry} from 'react-native';
import App from './src/components/App';
import {name as appName} from './src/app.json';
AppRegistry.registerComponent(appName, () => App);

and there I got:

Edit #3:

Now it helped me to overwrite the app.json with the following:

{
  "name": "test",
  "displayName": "test"
}

and new error is:

Edit #4:

I now moved all back to the src folder. So in the root there is no index.js anymore. Now this works pretty good. The usual react-scripts start is running. Also react-native start runs. And the issue with run-android was fixed with this in the MainApplication.java

protected String getJSMainModuleName() {
  return "index.android";
}

to

protected String getJSMainModuleName() {
  return "src/index.android";
}

I think this is another issue with the location...

ps: you can use this template as well it uses typescript (react-native init MyApp --template react-native-template-typescript ) — youssef ali, Apr 25 '20 at 13:33
I am new to React. But that Boilerplate said it: https://github.com/howtographql/react-apollo/tree/master/src so that's wrong? And better put it only to the root? — kwoxer, Apr 25 '20 at 13:45
yes and its better if you use typescript it will make ur life far more easier if the project got a little bigger — youssef ali, Apr 25 '20 at 14:00
Ok I now switched to TypeScript. But I still have trouble. I get different errors, but most of all it has issues to find the index.js file ```Could not find a required file. Name: index.js Searched in: E:\Azure\myapp_werserver_new\src error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.``` — kwoxer, Apr 25 '20 at 14:09
first get the last react-native cli then run this (react-native init MyApp --template react-native-template-typescript ) then navigate to MyApp (or whatever you called it) then run this command npm install — youssef ali, Apr 25 '20 at 14:15
Yes the MyApp template is running. Here the emulator works. So it's something strange on my code. But was running without issues. Strange behaviour... — kwoxer, Apr 25 '20 at 16:30
its not that strange actually the packager expects the index.js in root folder in which u register the app — youssef ali, Apr 25 '20 at 18:09
No, what I mean is. I use `react-scripts start` for the server. But that script is looking under `/src...`. And the usual `react-native start` is looking under root. This is my issue right now. Basically here is a kind of solution. I gonna try to overwrite my location now https://stackoverflow.com/questions/44448851/how-do-i-change-src-folder-to-something-else-in-create-react-app — kwoxer, Apr 26 '20 at 07:27

score 0 · Accepted Answer · answered Jul 07 '20 at 12:13

So the main issue is fixed relatively easy. All that needs to be done is having a placeholder App.js file and another index.js file. How to do that in detail here. Here is the short description:

First move your existing App.js file to src/App.js.

Now create a new App.js in the main folder:

import React from 'react';
import HybridApp from './src/App';
const App = (props) => {
  return (
    <HybridApp />
  );
}
export default App;

Also create a new src/index.js file:

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(<App />, document.getElementById("root"));

And all the other issues are related to using the wrong technology. Like you cannot use window in React Native. Here the code needs to be rewritten to be working again.

React Native Error: Unable to resolve module `./index` from `` - multiple issues

1 Answers1