警告：React.createElement：类型无效 — expo reactnative app

Question

I'm trying to built a react native expo app & getting this error

Error:

Running application on Android SDK built for x86.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, object,  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 your code at withExpoRoot.js:22., 
    in ExpoRoot (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)
- node_modules/expo/build/environment/muteWarnings.fx.js:27:24 in error
- node_modules/react/cjs/react.development.js:172:36 in warningWithoutStack
- node_modules/react/cjs/react.development.js:612:32 in warning
- node_modules/react/cjs/react.development.js:1944:14 in createElementWithValidation
- node_modules/expo/build/launch/withExpoRoot.js:21:20 in ExpoRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:10696:27 in renderWithHooks
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:13481:6 in mountIndeterminateComponent
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20459:25 in beginWork$$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19370:24 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:21822:15 in scheduleRootUpdate
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:23042:20 in ReactNativeRenderer.render
- node_modules/react-native/Libraries/ReactNative/renderApplication.js:52:52 in renderApplication
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:116:10 in runnables.appKey.run
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:197:26 in runApplication
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

here's my code:

api.js

export const fetchMeetups = () =>
    fetch('http://localhost:3000/api/meetups')
        .then(res => res.json());

App.js

import * as React from 'react';
import { Platform, StyleSheet, Text, View, ActivityIndicator } from 'react-native';
import { fetchMeetups } from './constants/api'; 

const instructions = Platform.select({
  ios: `Press Cmd+R to reload,\nCmd+D or shake for dev menu`,
  android: `Double tap R on your keyboard to reload,\nShake or press menu button for dev menu`,
});


class App extends React.Component{
  static defaultProps = {
    fetchMeetups
  }

  state = {
    loading: false,
    meetups: []

  }

  async componentDidMount(){
    this.setState({loading: true});
    const data = await this.props.fetchMeetups();
    setTimeout(() => this.setState({loading: false, meetups: data.meetups}),2000)
  }


  render(){
    if(this.state.loading){
      return(
        <ActivityIndicator size="large"/>
      )
    }
    return (
      <View style={styles.container}>
        <Text>MeetupME</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

index.js

import { registerRootComponent } from 'expo';

import App from './App';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
registerRootComponent(App);

Answer 1

Looks like App.js is missing the default export .

index.js attempts to import the default export ( import App from './App' ), so you just need to add the following to App.js. For example, to the end of the file.

export default App