Issue with getting through React Leaflet setup - Unexpected Token

Question

I'm following the guide for React Leaflet at: https://react-leaflet.js.org/docs/start-introduction/

I followed all the steps through setup. However, when I try to serve my react project, I get this error:

./node_modules/react-leaflet/lib/VideoOverlay.js 10:25
Module parse failed: Unexpected token (10:25)
You may need an appropriate loader to handle this file type.
|   var overlay = new LeafletVideoOverlay(url, bounds, options);
|   if (options.play === true) {
>     overlay.getElement()?.play();
|   }
|   return createElementObject(overlay, extendContext(ctx, {

Here is my react component:

import React from 'react';
import { MapContainer, TileLayer, useMap, Marker, Popup } from 'react-leaflet'

export default function SlideMape() {
    return (
        <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker position={[51.505, -0.09]}>
            <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
            </Marker>
        </MapContainer>
    );
}

And here is my package.json:

{
  "name": "slide-search-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.7.15",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^5.6.1",
    "graphql": "^16.6.0",
    "leaflet": "^1.9.4",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0",
    "react-leaflet": "^4.2.1",
    "react-router-dom": "^6.13.0",
    "react-scripts": "^2.1.3",
    "web-vitals": "^2.1.4"
  },
  "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": [
    ">0.2%",
   "not dead",
   "not op_mini all"
  ],
  "devDependencies": {
    "@types/leaflet": "^1.9.3"
  }
}

I adjusted my package.json browser list according to this: How to fix error "Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)"

Answer 1

Updating to "react-scripts": "^5.0.1" fixed this