Failed to compile
zomars opened this issue ยท 15 comments
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.
Hi @zomars !
Thanks for submitting this issue :)
I will try to have a look today, or tomorrow the latest
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.
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.
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.
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.
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.
Man! webpack configs are scary.. I'll take a dive and see what I can do, thanks for the suggestion @Minishlink !
Still no luck. Btw isn't supposed that CRA already binds native modules by default?
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.
I have the same issue. Any new solutions?
im having the same issue..
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
I just got how to make it works :D
you just copy source code from src and replace to your project :D