Issue in node modules

[Arasan8744]

Bug report in v4

Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.

Please make sure to check the following boxes before submitting an issue.\ Issues opened without using this template will be closed unless they have a good reason not to follow this template.

• [ ] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [ ] Using the latest version of React and ReactDOM v18.
• [ ] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
• [ ] Using the latest v4 version of React-Leaflet.
• [ ] The issue has not already been reported.
• [ ] Make sure you have followed the quick start guide for Leaflet.
• [ ] Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

Work after the installation of package

Actual behavior

Showing this error in terminal --> ./node_modules/react-leaflet/lib/VideoOverlay.js 10:25

Steps to reproduce

Please provide the simplest example possible to reproduce the issue, based on this StackBlitz.

[cam-brown]

I'm also experiencing this issue when running npm start on a basic React App using react-leaflet as shown in my App.js below:

import axios from "axios";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

function App() {
  const [data, setData] = useState([]);
  const [center, setCenter] = useState([51.505, -0.09]);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
    .get("https://your-api-endpoint.com")
    .then(response => {
      setData(response.data);
      const firstItem = response.data[0];
      setCenter([firstItem.latitude, firstItem.longitude]);
    })
    .catch(error => {
      console.log(error);
      setError(error);
    });
  }, []);

  if (error) {
    return <div>An error occurred: {error.message}</div>;
  }

  return (
    <MapContainer center={center} 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={center}>
      <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </Marker>
  </MapContainer>
  );
}

export default App;

The full error message is:

Failed to compile

./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, {

Versions of the relevant node packages are:

• leaflet = 1.9.3
• react = 18.2.0
• react-app = 1.1.2
• react-dom = 18.2.0
• react-leaflet = 4.2.0
• react-scripts = 2.1.3