How to fix error "Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)"

Question

I am trying to create a react-typescript app along with leaflet. I used the command,

npm install leaflet react-leaflet @types/react @types/leaflet --save to install the dependencies.

But when I start the application it says,

    ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41) File was processed with these loaders:  * ./node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. |   useEffect(function updatePathOptions() { |     if (props.pathOptions !== optionsRef.current) { >       const options = props.pathOptions ?? {}; |       element.instance.setStyle(options); |       optionsRef.current = options; 

Here's my package.json

{   "name": "aq-monitor",   "version": "0.1.0",   "private": true,   "dependencies": {     "@testing-library/jest-dom": "^5.12.0",     "@testing-library/react": "^11.2.7",     "@testing-library/user-event": "^12.8.3",     "@types/jest": "^26.0.23",     "@types/leaflet": "^1.7.0",     "@types/node": "^12.20.13",     "@types/react": "^17.0.5",     "@types/react-dom": "^17.0.5",     "antd": "^4.15.5",     "leaflet": "^1.7.1",     "react": "^17.0.2",     "react-dom": "^17.0.2",     "react-leaflet": "^3.2.0",     "react-router-dom": "^5.2.0",     "react-scripts": "4.0.3",     "typescript": "^4.2.4",     "web-vitals": "^1.1.2"   },   "scripts": {     "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test",     "eject": "react-scripts eject"   },   "eslintConfig": {     "extends": [       "react-app",       "react-app/jest"     ]   },   "browserslist": {     "production": [       ">0.2%",       "not dead",       "not op_mini all"     ],     "development": [       "last 1 chrome version",       "last 1 firefox version",       "last 1 safari version"     ]   },   "devDependencies": {     "@types/react-router-dom": "^5.1.7"   } } 

Here's map/index.tsx

import React from 'react'; import './styles.css'; import L, { LatLngExpression } from "leaflet"; import "leaflet/dist/leaflet.css"; import {MapContainer, TileLayer, Marker, Popup} from 'react-leaflet';  const position : LatLngExpression = [59.91174337077401, 10.750425582038146];  export default function MapJar() {     return (         <MapContainer center={position} zoom={13} scrollWheelZoom={false}>             <TileLayer                 attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"             />             <Marker position={position}>                 <Popup>                     A pretty CSS3 popup. <br /> Easily customizable.                 </Popup>             </Marker>         </MapContainer>     ); };  

I tried re-installing dependencies several times but still didn't work.

I understand this is a simple issue and an error that I am making but however, I have not been able to resolve this error.

Any input is appreciated. Thanks in advance.

Answer 1

I found a way to fix it.

Steps to fix:-

Open your package.json file and edit your browserslist as follows.

 "browserslist": {    "production": [       ">0.2%",       "not dead",       "not op_mini all"     ],     "development": [       "last 1 chrome version",       "last 1 firefox version",       "last 1 safari version"     ] }, 

to

"browserslist": [    ">0.2%",   "not dead",   "not op_mini all" ], 

Once you've done this, Delete node_modules/.cache directory.

Then try npm install

and npm start

Tadaaa!

References:-

• https://github.com/facebook/create-react-app/issues/9468#issuecomment-694191642
• https://github.com/PaulLeCam/react-leaflet/issues/877