react-leaflet-markercluster is not working

Question

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"

Answer 1

@akhtem-aliiev Maybe try this? https://www.npmjs.com/package/@changey/react-leaflet-markercluster . This link addresses the react 18 and leaflet v4 compatibility issue. I was able to get it to work. Hope it helps, thanks

Answer 2

If you got the issue

No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>

after upgrading react-leaflet and or leaflet, you should remove and re-add the marker cluster package because the upgrade may have create conflict in the packages versions.

Answer 3

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