after updating expo: Element type is invalid: expected a string (for built-in components) or a class/function

Question

After I updated my Expo SDK from 39 to 42, I got following error when trying to launch 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 forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

This error is located at: in App (created by ExpoRoot) in ExpoRoot (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39)

From the bug report I conclude that the error is located in my App.js file, even tho I havent changed anything beside upgrading my expo version.

App.js:

//Automatic imports
import React, {useState} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';

//My imports
import * as Font from 'expo-font';
import {AppLoading} from 'expo';
import ReduxThunk from 'redux-thunk';
import { createStore, combineReducers, applyMiddleware } from 'redux';


//import other screens
import NavigationContainer from './navigation/NavigationContainer';

//import Reducers
import authReducer from './store/reducers/auth';
import pigeonReducer from './store/reducers/pigeon';
import badgesReducer from './store/reducers/badges';
import languagesReducer from './store/reducers/language';

//imports related to firebase
import * as firebase from "firebase";
import ApiKeys from "./constants/ApiKeys";

//Loading Fonts, returns promise
const fetchFonts = () => {
  return Font.loadAsync({
    'Magnus' : require('./assets/fonts/MagnusText.ttf'),
    'AmaticBold' : require('./assets/fonts/Amatic-Bold.ttf'),
    'AmaticRegular' : require('./assets/fonts/AmaticSC-Regular.ttf'),
    'SEASRN' : require('./assets/fonts/SEASRN.ttf'),
    'Otto' : require('./assets/fonts/Otto.ttf'),
    'Gwibble' : require('./assets/fonts/GWIBBLE.ttf'),
    'GTA' : require('./assets/fonts/pricedown.otf')
  });
};

const rootReducer = combineReducers({
  auth: authReducer,
  myPigeons: pigeonReducer,
  myBadges: badgesReducer,
  myLanguage: languagesReducer
});

const store = createStore(rootReducer, applyMiddleware(ReduxThunk));


export default function App() {
  //firebase project initialisation
  if (!firebase.apps.length) {
    firebase.initializeApp(ApiKeys);
    //console.log("DB INITIALISED"); FIRING IF DATABASE INITIALISED
  };

  const [dataLoaded, setDataLoaded] = useState(false); //are fonts loaded?

  if(!dataLoaded){ //will go into if clause because fonts are not loaded
    return(
      <AppLoading 
        startAsync={fetchFonts} 
        onFinish={() => setDataLoaded(true)}
        onError={(err) => console.log(err)}
      />
    )
  }
  return (
    <Provider store={store}>
      <NavigationContainer/>
    </Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I know there were several people experiencing the same error, but there are much answers to their problems which dont work for me, maybe somebody has any idea how to fix mine. Incase you need other code samples from my project, let me know it and I will update this question.

Answer 1

99% of the time this error means you're importing Xyz from somewhere but it actually doesn't exist as export.

Thus when you try and do <Xyz ... /> in your JSX you'll get the error, which I'll reproduce here:

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

(emphasis mine)

undefined is the key here, for instance you have

import {AppLoading} from 'expo';

The line according to the current docs however is

import AppLoading from 'expo-app-loading';

To debug this, check imported components by simply logging them:

console.log(AppLoading);

You'll quickly find the import that is undefined, which is what causes the error.