javascript - Element type is invalid: expected a string (for built-in components) or a classfunction (for composite components)&

admin管理员组

文章数量:1291263

I'm working on a React Native project using Navigation and FlatList, but I get the following error when I run the app:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely fot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I understand this error usually occurs when components are not exported properly or there’s a mix-up between default and named imports. However, I’ve double-checked my code and made sure all components are exported using export default. Below is the structure of my project:

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './src/Screens/HomeScreen/HomeScreen';
import CoursesScreen from './src/Screens/Courses/CoursesScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="CoursesScreen" component={CoursesScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js

import { StyleSheet, Text, View } from 'react-native';
import React from 'react';

export default function HomeScreen() {
  return (
    <View>
      <Text>HomeScreen</Text>
    </View>
  );
}

const styles = StyleSheet.create({});

CourseScreen.js

import { StyleSheet, Text, FlatList } from 'react-native';
import React from 'react';

export default function CoursesScreen() {
  const Person = [
    { id: 1, name: 'Horace', age: 10 },
    { id: 2, name: 'Amos', age: 20 },
    { id: 3, name: 'Peter', age: 30 },
    { id: 4, name: 'John', age: 40 },
  ];

  return (
    <FlatList
      data={Person}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => (
        <Text style={styles.content}>
          {item.id}.{item.name}
        </Text>
      )}
    />
  );
}

const styles = StyleSheet.create({
  content: {
    fontSize: 20,
    backgroundColor: 'yellow',
    padding: 20,
    marginVertical: 10,
  },
});

Error I’m Getting: When I run the above code, I get the following error:

Error I’m Getting:
When I run the above code, I get the following error:

What I’ve Tried So Far:

1. Verified that all components are exported with export default.
2. Confirmed that the file paths in the imports are correct.
3. Reset the Metro Bundler cache and restarted:

npx react-native start --reset-cache
keyExtractor={(item) => item.id.toString()}
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons
npm install @react-navigation/native-stack

The Problem Still Exists! Could there be something I’m missing? I’d appreciate any help or guidance to resolve this issue. Thank you!

本文标签：