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 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.