Uncaught TypeError: Cannot read property 'classList' of undefined

Im using Leaflet with React, basically i wrote a wrapper of the library. When the React Wrapper is unmount I execute the following code:

  this.map.eachLayer(function(layer) {
          layer.remove();
   });
  this.map.remove();

Then the following error is thrown: Uncaught TypeError: Cannot read property ‘classList’ of undefined

The problem is in this function in leaflet-src.js:2336

function removeClass(el, name) {
	if (el.classList !== undefined) {
		el.classList.remove(name);
	} else {
		setClass(el, trim((' ' + getClass(el) + ' ').replace(' ' + name + ' ', ' ')));
	}
}

It seems that the el parameter is null.

Expected behavior Component Unmount and no error is trigger

Current behavior The component unmount successfully but some kind of error is trigged:

Uncaught TypeError: Cannot read property ‘classList’ of undefined

Environment

• Leaflet version: 1.5.1
• Browser (with version): Chrome 71
• OS/Platform (with version): Linux Mint 19.2

[Falke-Design]

I tried to reproduce this error but I found no way how this can happens. map._mapPane is only “deleted” in the map.remove() function but this also stops the animation. So it is not possible that _mapPane is undefined with only the Leaflet-Core code.

I never worked with react, so my knowledge is very small but I tested it and I get no errors: https://codesandbox.io/s/leaflet-with-react-forked-dohc5d it is an older React version but it worked … Maybe because it is using react-leaflet?

Until we find a reproducable example with vanilla Leaflet, we will close this.

[leroydev]

@leroydev can you please share a stacktrace of the error?

Unfortunately, I am unable to reproduce it myself at the moment, but I do have stacktraces from Sentry: