Proper syntax for loading/exporting react components? - reactjs

Question

I'm new to reactjs and am unable to debug this error: Element type is invalid: expected a string or a class/function but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of Map.
Here is the code:
Map.js
import React, { Component } from 'react'
import { GoogleMapLoader, GoogleMap, Marker } from 'react-google-maps'
class Map extends Component {
render(){
const mapContainer = <div style={{height: '100%', width: '100%'}}></div>
return (
<GoogleMapLoader
containerElement = { mapContainer }
googleMapElement = {
<GoogleMap
defaultZoom={15}
defaultCenter={this.props.center}
options={{streetViewControl: false, mapTypeControl: false}}>
</GoogleMap>
} />
)
}
}
export default Map
Places.js
import React, { Component } from 'react'
class Places extends Component {
render(){
return (
<div>
Helloljlk
</div>
)
}
}
export default Places
App.js:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Map from './components/Map'
import Places from './components/Places'
class App extends Component {
render(){
const location = {
lat: 40.7,
lng: -73.98
}
return (
<div>
Hello
<div style={{width: 300, height: 600, background: 'red'}}>
<Map center={location} />
</div>
<Places />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
I've looked up similar issues but haven't been able to find anything that works i.e. removing {} from import statements.

Answer 1

The component GoogleMapLoader has been deprecated in the version 6 onwards (please refer to the changelog here). So if you are using that version, you will get undefined when you import GoogleMapLoader. Instead, you should now be using withGoogleMap.
Map.js
import React, { Component } from 'react'
import { GoogleMapLoader, GoogleMap, Marker } from 'react-google-maps'
const Map = withGoogleMap(props => (
<GoogleMap
defaultZoom={15}
defaultCenter={props.center}
options={{streetViewControl: false, mapTypeControl: false}} />
));
App.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Map from './components/Map'
import Places from './components/Places'
class App extends Component {
render(){
const location = {
lat: 40.7,
lng: -73.98
}
const mapContainer = <div style={{height: '100%', width: '100%'}}></div>;
return (
<div>
Hello
<div style={{width: 300, height: 600, background: 'red'}}>
<Map
center={location}
containerElement={mapContainer}
/>
</div>
<Places />
</div>
)
}
}