为什么会出现“元素类型无效”错误？

Question

In the error I'm getting in my iOS simulator doesn't make sense to me. My Home.js component seems fine to me. I can't understand how I'm getting this error. I've clearly exported the component. How can I get rid of this error?

Here's Home.js :

import React from 'react';
import Container from 'native-base';
import {MapContainer} from "../../../components/MapContainer/index";

class Home extends React.Component {

    componentDidMount() {
        this.props.setName();
    }

    render() {
        const region = {
            latitude: 3.146642,
            longitude: 101.695845,
            latitudeDelta: 0.8922,
            longitudeDelta: 0.0421
        }
        return(
            <Container>
                <MapContainer region={region}/>
            </Container>
        );
    }
}

export default Home;

Here's index.js :

import React from 'react';
import View from 'native-base';
import MapView from 'react-native-maps';
import styles from './MapContainerStyles';

export const MapContainer = ({region}) => {
    return(
        <View style={styles.container}>
            <MapView
                provider={MapView.PROVIDER_GOOGLE}
                style={styles.map}
                region={region}
            >
            </MapView>
        </View>
    );
}

Here's the 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.

Check the render method of 'Home'.

Answer 1

you have two exports here

import React from 'react';
import View from 'native-base';
import MapView from 'react-native-maps';
import styles from './MapContainerStyles';

//delete export from the next line
export const MapContainer = ({region}) => {
    return(
        <View style={styles.container}>
            <MapView
                provider={MapView.PROVIDER_GOOGLE}
                style={styles.map}
                region={region}
            >
            </MapView>
        </View>
    );

}

export default MapContainer;

Answer 2

You have 2 exports in your MapContainer .

You have this one at the top export const MapContainer

and you have this one at the bottom. export default MapContainer;

Now you need to get rid of one, but the one you keep will determine how you import it later.

If you keep the default export you then import like so

import MapContainer from "../../../components/MapContainer/index";

If you keep the non default export you will import like so

import {MapContainer} from "../../../components/MapContainer/index";