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

[mrafei]

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 .

[PaulLeCam]

Please provide a simple way to reproduce the issue using the provided CodePen

[kazlik]

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

[OleksiiKachan]

@PaulLeCam any updates on this one? prevents me from updating to v3

[PaulLeCam]

Should be fixed in v3.2, please try it out!

[kazlik]

My example works now, thanks!

[FlacorLopes]

I've tried to upgrade react-leaflet to version 3.2.0 to solve this issue, but now I'm getting this error:

./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| useEffect(function updatePathOptions() {
| if (props.pathOptions !== optionsRef.current) {
| const options = props.pathOptions ?? {};
| element.instance.setStyle(options);
| optionsRef.current = options;
Could not find files for / in .next/build-manifest.json
Could not find files for / in .next/build-manifest.json

I read some notes about edit browerlist in package.json here but didn't succeed.

Any comments will be helpful.

I found a way to fix it by enabling webpack 5 as indicated by this answer: #883 (comment)