React Native项目报错：Module 'App'无法找到，求解决方案

Hey there! Let's troubleshoot that "Module 'App' could not be found" error you're hitting. As someone who's definitely messed up React Native project structures early on, I've got a few solid steps to help you fix this:

1. Double-Check Your Root index.js Import #

React Native relies on the root index.js as its entry point. Since you deleted the original App.js, this file needs to point directly to your new app/index.js. Make sure your root index.js looks like this:

import { AppRegistry } from 'react-native';
import App from './app'; // This should target your app folder's index.js
import { name as appName } from './app.json';

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

If you accidentally wrote ./App instead of ./app here, that's a common culprit for the missing module error.

2. Ensure app/index.js Exports Your App Component #

Your app/index.js needs to default export a valid React component that acts as your app's root. For example:

import React from 'react';
import Router from './router';

const App = () => {
  return <Router />;
};

export default App;

If you forget the export default App line, or export a component with a different name, the root index.js won't be able to find it.

3. Update Your package.json main Field #

Some React Native projects have a main field in package.json that defaults to "main": "App.js". You'll need to update this to point to your new entry. Change it to:

"main": "index.js"

Or directly to your app folder's index if you prefer: "main": "./app/index.js" — though using the root index.js as a middleman is more standard.

4. Clear the Metro Bundler Cache #

Metro loves to cache old file structures, so it might still be looking for the original App.js. Run this command to reset the cache:

# For iOS/macOS or Windows
npx react-native start --reset-cache

Then restart your project with npx react-native run-android or npx react-native run-ios.

5. Verify Your Project Structure #

Double-check that your folder structure matches what you intended — typos here are easy to miss! It should look like this:

your-project-root/
├── app/
│   ├── config/
│   ├── screens/
│   ├── index.js
│   └── router.js
├── index.js
├── package.json
├── app.json
└── (other default RN files)

If your app folder is named something else (like App or apps), your import paths will break.

6. Check Your router.js Setup #

If your router.js handles navigation (like with React Navigation), make sure it's correctly exporting the navigation container. For example, with React Navigation 6+:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createStackNavigator();

const Router = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Router;

A broken import or missing export here can indirectly cause the "Module 'App'" error too.

If you still hit issues after these steps, sharing the exact code from your root index.js, app/index.js, and package.json (plus your project structure screenshot) will help narrow things down further!

内容的提问来源于stack exchange，提问作者BRDroid