Failed to compile

[zomars]

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.

[AuroreM]

Hi @zomars !
Thanks for submitting this issue :)
I will try to have a look today, or tomorrow the latest

[4ian]

Hi @zomars, what are you using to build your app? Webpack?
Are you using a boilerplate? Is babel installed?

If you need something to quickly get started, you can have a look at https://github.com/facebookincubator/create-react-app (much recommended! :)) - otherwise let us know what is your build configuration.

[zomars]

That's the one that I'm using right now. I've bootstrapped a test app with it and just added the react-native-web package.

[AuroreM]

@zomars Can you provide a repository to have a look ?

[tdonia]

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.

[zomars]

Hi @AuroreM I've made a bare bones test case for the issue I'm having:

https://github.com/zomars/react-native-web-maps-test

I've bootstrapped using Create React App.

[Minishlink]

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.

[zomars]

Man! webpack configs are scary.. I'll take a dive and see what I can do, thanks for the suggestion @Minishlink !

[zomars]

Still no luck. Btw isn't supposed that CRA already binds native modules by default?

[zomars]

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.

[stefanjung]

I have the same issue. Any new solutions?

[pbahr97]

im having the same issue..

[c-h-]

Had the same issue - mine started working when I added these two lines (second line that babel captures all react-native-* packages).

https://github.com/Minishlink/DailyScrum/blob/master/web/webpack.config.babel.js#L20-L21

Using create-react-native-app --with-web-support with this package on web and { MapView } from 'expo' for native

[smnodame]

I just got how to make it works :D
you just copy source code from src and replace to your project :D