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='© <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 reinstalling 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.
Advertisement
Answer
I found a way to fix it.
Steps to fix:
Open your package.json file and edit your browserslist as follows.
From ?? Operator results in “Unexpected Token” err when used in package #9468:
"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 the node_modules/.cache
directory.
Then try npm install
.
And npm start
Tadaaa!
References: