Cannot read properties of undefined (reading '_leaflet_pos')

[iqbalhassan-7654]

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.

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

Expected behavior

Please describe.

Actual behavior

Please describe.

Steps to reproduce

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

[iqbalhassan-7654]

[piotr-cz]

I think this may happen when you access native leaflet methods at the time when map container is unmounted.

For example I'm attempting to store map bounds in a state when user navigates to another page. At the same time I'm unmounting map container

[marcoangelo]

@piotr-cz How are you unmounting the map container? I am getting a similar issue as in this bug report; I try to use the remove() method on the map instance (when using the useMap hook) in a hook cleanup effect, but get a [Map container is already initialized] error.

[piotr-cz]

@marcoangelo Now I'm using external state, so it's updates don't trigger leaflet methods after component has been unmounted

[iqbalhassan-7654]

Still i have that issue and don't resolve yet how can i resolve it any suggestion @piotr-cz

[iqbalhassan-7654]

@marcoangelo can you resolve it ?

[iqbalhassan-7654]

@PaulLeCam the issue is when come to component of map and zoom in zoom out repeatedly after that immediate go to next component they give me this error why ?

[piotr-cz]

@iqbalhassan-7654 It's probably because of this: https://github.com/PaulLeCam/react-leaflet/issues/1136#issuecomment-2203908894

[iqbalhassan-7654]

@piotr-cz can i share my component ? with you i don't understand unmount the map everything but still the issue

[iqbalhassan-7654]

` const position = [state.lat || 0, state.lng || 0] const displayMap = ( <MapContainer key={props.mapLayer?.id} center={position} id='mapContainer' zoom={state.zoom} style={{ height: props.height, width: props.width }} maxZoom={props.mapLayer.maxZoom} onBaselayerchange={changeBaseLayer} whenReady={(map)=>{ if(isMapMounted.current){ setMapInstance(map.target) setIsMapReady(true) if (map.target) { map.target.scrollWheelZoom?.enable(); } } }} scrollWheelZoom={false}

// ref={setMap}
>
  {/* <MapInitializer setMap={setMap} /> */}
  {
    mapInstance&&isMapMounted.current&&isMapReady&&<>

  <DrawControl
    onDrawControlReady={_onDrawControlReady}
    drawSettings={drawSettings}
    onDrawStop={_onDrawStop}
    onDrawStart={_onDrawStart}
  />

  <ClusteredMarkers
    clustersEnabled={props.logInUser?.attributes?.clusters}
    markers={state.markers}
  />

  {props.geoFence?.map((obj) => (
    <ChidlGeofences
      key={obj.id}
      obj={obj}
      settings={settings}
      onFeatureGroupAdd={onFeatureGroupAdd}
      _onEditControlReady={_onEditControlReady}
      _onEditPath={_onEditPath}
      _onEditStart={_onEditStart}
    />
  ))}

  <LayersControl position="bottomright">
      {MapTileLayers?.map(layer => <LayersControl.BaseLayer id={layer.id} checked={layer.id === props.mapLayer.id} key={layer.id} name={layer.name}>
        <TileLayer {...layer} minZoom={state.minZoom} />
      </LayersControl.BaseLayer>)}
    </LayersControl>
  <ZoomControl position={'bottomright'} />
  </>
  }
</MapContainer>

) return (

{state.geofenceModal && state.resourceList !== 'tracks' && ( )} {state.geofenceModal && state.resourceList === 'tracks' && ( )} {!['addResource', 'editResource'].includes(state.activeOperation) && ( <> {props.mapLayer && [ 'osm', '', 'carto', 'googleTerrain', 'googleSatellite', 'googleHybrid', 'googleRoad', 'baidu', 'yandexMap', 'yandexSat' ].includes(props.mapLayer.id) && displayMap} )} addShape('circle')} id='addCircle' > addShape('polygon')} id='addPolygon' > addShape('polyline')} id='addPolyline' >

)`

[iqbalhassan-7654]

@piotr-cz check the above code if not understand any thing my code i will tell ask me kindly resolve my issue