更新博览会后：元素类型无效：需要字符串（对于内置组件）或类/函数

将 Expo SDK 从 39 更新到 42 后，尝试启动应用程序时出现以下错误：

错误：元素类型无效：需要一个字符串（对于内置 组件）或类/函数（对于复合组件）但得到： 不明确的。您可能忘记从文件中导出组件 它是在中定义的，或者您可能混淆了默认导入和命名导入。

检查渲染方法App.

该错误位于： 在应用程序中（由ExpoRoot创建） 在 ExpoRoot 中（位于 renderApplication.js:45） 在 RCTView 中（位于 View.js:34） 在视图中（AppContainer.js：106） 在 RCTView 中（位于 View.js:34） 在视图中（在 AppContainer.js：132） 在 AppContainer 中（位于 renderApplication.js:39）

从错误报告中我得出结论，错误位于我的 App.js 文件中，即使除了升级我的 expo 版本之外我没有更改任何内容。

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',
  },
});

我知道有几个人遇到了同样的错误，但是他们的问题有很多答案对我不起作用，也许有人知道如何解决我的问题。 如果您需要我的项目中的其他代码示例，请告诉我，我将更新此问题。

99% 的情况下，此错误意味着您正在导入Xyz来自某个地方，但它实际上并不作为出口存在。

因此，当你尝试做时<Xyz ... />在 JSX 中，您会收到错误，我将在此处重现该错误：

错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：不明确的。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

（强调我的）

undefined是这里的关键，例如你有

import {AppLoading} from 'expo';

然而，根据当前文档，该行是

import AppLoading from 'expo-app-loading';

要调试此问题，只需记录导入的组件即可检查它们：

console.log(AppLoading);

您很快就会找到导入的内容undefined，这就是导致错误的原因。