1

I am using react leaflet maps and I just imported and called them them in my react app. It is giving me this error. I already loaded provided CSS and JS scripts in my index.html file. Any help will be appreciated.

Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/react-scripts/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;

I checked in a new react project as well. Bellow attached is the code

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

function App() {
  return (
    <div
      style={{
        height: "180px",
      }}
    >
      <MapContainer center={[51.505, -0.09]} 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={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
}

export default App;
Stoobish
  • 1,202
  • 4
  • 23
Sohaib
  • 29
  • 2
  • 10
  • 4
    Does this answer your question? [How to fix error "Failed to compile : ./node\_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)"](https://stackoverflow.com/questions/67552020/how-to-fix-error-failed-to-compile-node-modules-react-leaflet-core-esm-pat) – Andrey Nov 09 '21 at 13:51
  • This is a duplicated question. It's been a while since you asked but the answer as of Apr 2022 is here: https://stackoverflow.com/a/67719691/1721525 – alansaldivar Apr 07 '22 at 07:58

0 Answers0