React-leaflet: Error TypeError: Cannot read property '_targets' of null when updating list of map markers

Created on 20 Jan 2021 · 4Comments · Source: PaulLeCam/react-leaflet

Bug report

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 a supported version of React and ReactDOM (v17.0.0 minimum).
[ x] Using the supported version of Leaflet (v1.7.1 minimum) and its corresponding CSS file is loaded.
[ x] Using the latest v3 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

it shouldn't throw error.

Actual behavior

I have a list of markers all of which have permanent tooltips. When I update the list of markers I get the following error:
Error TypeError: Cannot read property '_targets' of null

Steps to reproduce

<MapContainer
      whenCreated={setMap}
      style={{ height, width, margin: "0 auto", borderRadius: 4 }}
      center={[
        center.latitude ,
        center.longitude,
      ]}
      zoom={zoom}
      zoomControl={false}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />

      {markers
        ? markers.map((m, i) =>
            m.latitude && m.longitude ? (
              <Marker
                key={`marker-${m.markerType}-${m.latitude}-${m.longitude}`}
                position={[m.latitude, m.longitude]}
                onClick={() => {
                  m.onClick();
                }}
                style={{ width: 16, height: 16 }}
                icon={icon(
                  m.index,
                  m.color,
                  m.markerType,
                  m.markerId === selectedMarkerId
                )}
              >
                <Tooltip
                  onClick={() => {
                    m.onClick();
                  }}
                  direction="bottom"
                  offset={[100, -2]}
                  opacity={1}
                  permanent
                  interactive
                >
                  {m.tooltip}
                </Tooltip>
              </Marker>
            ) : null
          )
        : null}
    </MapContainer>

Above is the code for my mapcontainer. markers seem to update just fine but it throws the error too.
thanks .

Source

mrafei

Most helpful comment

I have same problem.
There is a problem with interactive prop. If tootltip is interactive and marker is removed then error is thrown.
Example: https://codesandbox.io/s/leaflet-bug-wizwc?file=/src/App.js
First marker is not interactive. You can toggle tooltip # 1 and then toggle marker # 1 and it works (marker and tooltip is hidden)
Second marker is interactive. If you toggle tooltip # 2 and then toggle marker # 2, leaflet throws error