How to fix "You may need an additional loader to handle the result of these loaders." React-Leaflet map

Question

I try to load a react-leaflet map but I receive error like this:

    Failed to compile.

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

1. I import components from library:

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

2. I try to use the map in the same app.js file:

<MapContainer
    className="markercluster-map"
    center={[51.0, 19.0]}
    zoom={4}
    maxZoom={18}>
    <TileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    />
  </MapContainer>

Can I get example how to use leaflet map or How to fix this error ?

Answer 1

in your project install this moduals in package.json:

    "leaflet": "^1.6.0",
    "react-leaflet": "^3.2.0",

then remove @react-leaflet forler in node-moduales in your system with cmd in any folder

git clone https://github.com/hqdung99/maps-leaflet-youtube.git

when finish goto the folder this node-modules and copy this folder @react-leaflet and past into the Previous node-modules folder

Answer 2

if you use craco like this in package.json

  "scripts": {
 "start": "craco start",

change to

  "scripts": {
 "start": "react-scripts start",