react-native-web-maps: Failed to compile

After installing both needed packages I’m getting this error:

Failed to compile
./node_modules/react-native-web-maps/src/index.js
Module parse failed: Unexpected token (6:50)
You may need an appropriate loader to handle this file type.
| import Marker from './Marker';
| 
| const GoogleMapContainer = withGoogleMap(props => <GoogleMap {...props} ref={props.handleMapMounted} />);
| 
| class MapView extends Component {
This error occurred during the build time and cannot be dismissed.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 15 (3 by maintainers)

Most upvoted comments

I have the same issue. Any new solutions?

hi all! thanks @AuroreM for this project. here’s an example repo from a vanilla create-react-app install to this recreate error:

https://github.com/likestripes/super-couscous

./node_modules/react-native-web-maps/src/index.js
Module parse failed: Unexpected token (6:50)
You may need an appropriate loader to handle this file type.
| import Marker from './Marker';
| 
| const GoogleMapContainer = withGoogleMap(props => <GoogleMap {...props} ref={props.handleMapMounted} />);
| 
| class MapView extends Component {
This error occurred during the build time and cannot be dismissed.

I’ll followup if I’m able to track down any information on how/why/what might have changed to create this.

im having the same issue…

Even importing directly doesn’t work:

Failed to compile
./node_modules/react-native-web-maps/src/index.js
Module parse failed: Unexpected token (6:50)
You may need an appropriate loader to handle this file type.
| import Marker from './Marker';
| 
| const GoogleMapContainer = withGoogleMap(props => <GoogleMap {...props} ref={props.handleMapMounted} />);
| 
| class MapView extends Component {
This error occurred during the build time and cannot be dismissed.

This is my mininal test:

import React from "react"
import MapView from "react-native-web-maps"

const Map = props => (
  <MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421
    }}
  />
)

BTW I’m using react-native-web and styled-components/native without any issues.

You need to compile the library with babel-loader.

See this webpack config for an example (it matches every node_modules beginning with react-native-. From this, you can surely customize your config-overrides.js in your CRA.