Compatability issues and TypeError: Cannot read property 'removeLayer' of undefined

[laurencefass]

I cant get this to work with React Leaflet 2. I am also a bit confused by the github homepage and wonder if there is a typo?

advice given is:

NOTE: the @next is required for react-leaflet v3 support. If you are still using react-leaflet v3, add dependency as react-leaflet-markercluster@^2.x.x

Should that say "if you are still using react-leaflet v2"?

I'm hoping to upgrade React leaflet in the future but for now I am tied to version 2 and in need of marker clustering. Im not sure of the correct compatability and my package.json combination results in a very long error.

  "dependencies": {
    "leaflet": "^1.7.1",
    "leaflet.markercluster": "^1.5.0",
    "react-leaflet": "^2.6.1",
    "react-leaflet-markercluster": "^2.x.x",
  },

The program works fine without the markercluster component. The error is see is huge but it starts with

TypeError: Cannot read property 'removeLayer' of undefined
MarkerClusterGroup.componentWillUnmount
node_modules/react-leaflet-markercluster/node_modules/react-leaflet/es/MapLayer.js:59
  56 | _proto.componentWillUnmount = function componentWillUnmount() {
  57 |   _MapComponent.prototype.componentWillUnmount.call(this);
  58 | 
> 59 |   this.layerContainer.removeLayer(this.leafletElement);
     | ^  60 | };
  61 | 
  62 | _proto.render = function render() {
View compiled
callComponentWillUnmountWithTimer
node_modules/react-dom/cjs/react-dom.development.js:19613
  19610 |   startPhaseTimer(current, 'componentWillUnmount');
  19611 |   instance.props = current.memoizedProps;
  19612 |   instance.state = current.memoizedState;
> 19613 |   instance.componentWillUnmount();
  19614 |   stopPhaseTimer();
  19615 | }; // Capture errors so they don't interrupt unmounting.
  19616 | 
View compiled
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:188
  185 |     window.event = windowEvent;
  186 |   }
  187 | 
> 188 |   func.apply(context, funcArgs);
      | ^  189 |   didError = false;
  190 | } // Create a global error event handler. We use this to capture the value
  191 | // that was thrown. It's possible that this error handler will fire more
View compiled
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:237
  234 | // errors, it will trigger our global error handler.
  235 | 
  236 | evt.initEvent(evtType, false, false);
> 237 | fakeNode.dispatchEvent(evt);
      | ^  238 | 
  239 | if (windowEventDescriptor) {
  240 |   Object.defineProperty(window, 'event', windowEventDescriptor);
View compiled
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:292
  289 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
  290 |   hasError = false;
  291 |   caughtError = null;
> 292 |   invokeGuardedCallbackImpl$1.apply(reporter, arguments);
  293 | }
  294 | /**
  295 |  * Same as invokeGuardedCallback, but instead of returning an error, it stores
View compiled
safelyCallComponentWillUnmount
node_modules/react-dom/cjs/react-dom.development.js:19620
  19617 | 
  19618 | function safelyCallComponentWillUnmount(current, instance) {
  19619 |   {
> 19620 |     invokeGuardedCallback(null, callComponentWillUnmountWithTimer, null, current, instance);
  19621 | 
  19622 |     if (hasCaughtError()) {
  19623 |       var unmountError = clearCaughtError();
View compiled
commitUnmount
node_modules/react-dom/cjs/react-dom.development.js:20142
  20139 | var instance = current.stateNode;
  20140 | 
  20141 | if (typeof instance.componentWillUnmount === 'function') {
> 20142 |   safelyCallComponentWillUnmount(current, instance);
        | ^  20143 | }
  20144 | 
  20145 | return;