'react-leaflet-markercluster is not working

I'am trying to use react-leaflet-markercluster, but after I add <MarkerClusterGroup> to the code, errors are displayed in the console and the page does not load. If this component is not added, everything will work fine.

Perhaps the problem is in version conflicts, but I tried to roll back the version of react-leaflet, but conflicts also occur while installing [email protected] with the rest of the packages. Therefore, I decided to focus on working with actual versions.

App.js

import { MapContainer, TileLayer, Marker } from 'react-leaflet'
import MarkerClusterGroup from 'react-leaflet-markercluster'
import 'leaflet/dist/leaflet.css'
import 'react-leaflet-markercluster/dist/styles.min.css'

const App = () => {
  return (
    <div className="container">
      <MapContainer className="map-container" center={[49.8397, 24.0297]} zoom={6}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />        
        <MarkerClusterGroup>
          <Marker position={[49.8397, 24.0297]} />
          <Marker position={[52.2297, 21.0122]} />
          <Marker position={[51.5074, -0.0901]} />
        </MarkerClusterGroup>
      </MapContainer>
    </div>
  )
}

export default App

Error:

Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>
    at useLeafletContext (context.js:9:1)
    at usePath (path.js:18:1)
    at ContainerComponent (component.js:6:1)
    at renderWithHooks (react-dom.development.js:16141:1)
    at updateForwardRef (react-dom.development.js:19968:1)
    at beginWork (react-dom.development.js:22391:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
    at invokeGuardedCallback (react-dom.development.js:4270:1)
    at beginWork$1 (react-dom.development.js:27243:1)

package.json dependencies:

"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1",
"leaflet": "^1.8.0",
"leaflet.markercluster": "^1.5.3",
"react-leaflet": "^4.0.0",
"react-leaflet-markercluster": "^3.0.0-rc1"
reactjsleafletreact-leafletleaflet.markercluster


Solution 1:[1]

Your ContainerComponent, component uses "useLeafletContext" which can only be used in a child component of , e.g. MapContainer ContainerComponent MapContainer

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hugo Paul

Related Questions