0

I'm trying to use the MapView package in my react website and I'm getting error below when I do import MapView from 'react-native-maps':

ERROR in ./node_modules/react-native-maps/lib/Geojson.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/rafael/Repositories/react-project/node_modules/react-native-maps/lib/Geojson.js: Support for the experimental syntax 'jsx' isn't currently enabled (38:13):

  36 |     const lineOverlays = makeLineOverlays(geojson.features);
  37 |     const polygonOverlays = makePolygonOverlays(geojson.features);
> 38 |     return (<React.Fragment>
     |             ^
  39 |       {pointOverlays.map((overlay, index) => {
  40 |             const markerColor = getColor(color, overlay, 'marker-color');
  41 |             const pointOverlayTracksViewChanges = overlay.feature.properties?.tracksViewChanges || tracksViewChanges;

I'm using yarn package manager and these are my dependencies:

    "@babel/core": "^7.19.3",
    "@babel/preset-react": "^7.18.6",
    "@emailjs/browser": "^3.6.2",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@hookform/resolvers": "^2.9.7",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.9.0",
    "@mui/styles": "^5.9.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "axios": "^1.0.0",
    "babel": "^6.23.0",
    "babel-loader": "^8.2.5",
    "babel-preset-env": "^1.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-elastic-carousel": "^0.11.5",
    "react-hook-form": "^7.34.2",
    "react-icons": "^4.4.0",
    "react-native": "^0.70.2",
    "react-native-maps": "^1.3.2",
    "react-router-dom": "5",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.0.8",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.0",
    "yup": "^0.32.11"

I looked for solutions to this problem but I didn't find it... Does anyone know what's going on?

Goat Solutions
  • 118
  • 10
  • It's showing you in the error massage that the problem is this line: ```38 | return (``` and I think that maybe you forgot import ```React``` or something. You can simply replace the ```React.Fragment``` with ```<> >```. This is a shorter syntax for fragment and you don't need to import ```React``` for it. – Tehila Oct 11 '22 at 00:50

0 Answers0