Error: Element type is invalid - expected a string or a class/function, but got undefined

Question

I'm encountering the following error in my React application:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

import React, {useState} from 'react';
import * as Font from 'expo-font'; 
import Home from './screens/home';
import { AppLoading } from 'expo';


const getFonts = () =>Font.loadAsync({
  'nunito-regular': require('./assets/fonts/Nunito-Regular.ttf'),
  'nunito-Bold': require('./assets/fonts/Nunito-Bold.ttf'),

});

export default function App() {
  const[fontsLoaded, setFontsLoaded] = useState(false);

  if(fontsLoaded){
  return (
    <Home/>
  );
} else {
 return(
  <AppLoading
  startAsync={getFonts}
  onFinish={()=>setFontsLoaded(true)}/>
 )
}
}





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

const Home = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>Home screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  titleText: {
    fontFamily: 'nunito-bold',
    fontSize: 18,
  }
});

export default Home;

I have already checked for common mistakes like incorrect exports, mixing up default and named imports, and ensuring that the component is defined in the correct file. However, I'm still stuck with this error.

Can someone please help me identify what might be causing this issue and suggest a solution? Thank you!