Importing MarkerClusterGroup results in TypeError

[reggie3]

I am receiving the following error when trying to use this package.

TypeError: Super expression must either be null or a function, not object

The entire error is shown here:

The error is associated with these lines of code in the react-leaflet-markcluster.js file (line numbers differ from what is shown in the error because of Chrome debugger formatting)

I am trying to use the package in a Gatsby project, but I don't think that is causing the error. I am successfully able to import and use the react-leaflet project.

Version Info:

"react-leaflet": "^2.0.0",
"react-leaflet-markercluster": "^1.1.8",
"leaflet": "^1.3.1",
"leaflet.markercluster": "^1.3.0",
"gatsby": "^1.9.273",

Related Import Statements

import {
  Map,
  TileLayer,
  Marker,
  Popup,
} from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import MarkerClusterGroup from 'react-leaflet-markercluster/dist/react-leaflet-markercluster';
import 'react-leaflet-markercluster/dist/styles.min.css'; 

[oserban]

I have the same issue with:

"leaflet": "^1.3.1",
"leaflet.markercluster": "^1.3.0",
"react-leaflet": "^2.0.0-rc.3",
"react-leaflet-markercluster": "^1.1.8",

Is there a recommended version for these libraries?

[yuzhva]

This plugin does not support react-leaflet v2.

[ThiefMaster]

Any plans to update it to include v2 support?

[yuzhva]

@ThiefMaster yep, I will try to deliver it during the next week.
The trick is that react-leaflet was as the candidate release till that day.

So since today, I need to update this lib.
I will update package.json dependency to solve that issue in v1.1.9.

And since v2.0 there will be support of react-leaflet ^2.0 latest React context from 16.3

[webcarrot]

Temporary version:

import { MapLayer, withLeaflet } from "react-leaflet";
import L from "leaflet";

require("leaflet.markercluster");

class MarkerClusterGroup extends MapLayer {

  createLeafletElement(props) {
    const el = new L.markerClusterGroup(props);
    this.contextValue = {
      ...props.leaflet,
      layerContainer: el
    };
    return el;
  }

}

export default withLeaflet(MarkerClusterGroup);

[yuzhva]

@webcarrot Many thanks for your contribution!

@reggie3 @oserban @ThiefMaster

Currently, the latest version with support of react-leaflet v2.0 and React 16.3 context API available as candidate release:

yarn add react-leaflet-markercluster@next # yarn
npm install react-leaflet-markercluster@next # npm

After the README and demo-app will be updated will publish it as release package.

P.S: it's stable and I think there would no be any changes in final release, so enjoy it (=

[webcarrot]

Hi.

1. In react-leaflet-markercluster@next version markers pop-ups do not display content - probably they need map from props.leaflet to be set/provided in MarkerClusterGroup instance contextValue.
2. In my temporary version events handlers are "automagically" used by L.markerClusterGroup plugin so probably there is no need to reduce/filter/split props in createLeafletElement to handle events manually.
3. This temporary version simply drop support for deprecated API (markers, options etc.).

Sorry for my English.

[yuzhva]

@webcarrot

In react-leaflet-markercluster@next version markers pop-ups do not display content - probably they need map from props.leaflet to be set/provided in MarkerClusterGroup instance contextValue.

Yep, you are right. Already fixed it in 2.0.0-rc2 so it's published.

events handlers are "automagically"
Just it's semantically inconveniently to use it. When you are writing some event handler on a cluster like:

<MarkerClusterGroup onClusterClick={} onCLusterMouseOver={} />

The repeating word Cluster seems superfluous

<MarkerClusterGroup onClick={} onMouseOver={} />

Gives a cleaner way of using props for event handlers.

[oserban]

The 2.0.0-rc3 version works flawlessly with my use case. Thanks.

[webdobe]

I'm getting similar behavior and cannot get past it for the life of me.

"leaflet": "^1.3.2",
"leaflet.markercluster": "^1.3.0",
"react-leaflet": "^2.0.0",
"react-leaflet-markercluster": "^2.0.0-rc3",

I hit the error:

leaflet.markercluster-src.js?d09f:17 Uncaught ReferenceError: L is not defined
    at eval (leaflet.markercluster-src.js?d09f:17)
    at L.MarkerClusterGroup.L.FeatureGroup.extend.options.maxClusterRadius (leaflet.markercluster-src.js?d09f:8)
    at eval (leaflet.markercluster-src.js?d09f:11)
    at Object.<anonymous> (bundle.js:11987)
    at __webpack_require__ (bundle.js:20)
    at eval (react-leaflet-markercluster.min.js?a99b:1)
    at Object.<anonymous> (bundle.js:11976)
    at __webpack_require__ (bundle.js:20)
    at eval (MarkersLayer.js?ba8d:4)
    at Object.<anonymous> (bundle.js:11964)
(anonymous) @ leaflet.markercluster-src.js?d09f:17
L.MarkerClusterGroup.L.FeatureGroup.extend.options.maxClusterRadius @ leaflet.markercluster-src.js?d09f:8

If I add leaflet.js directly to the index.html
Then I get the same error that started this thread.

react-leaflet-markercluster.min.js?a99b:1 Uncaught TypeError: Cannot read property 'markerClusterGroup' of undefined
    at t.value (react-leaflet-markercluster.min.js?a99b:1)
    at t.MapLayer (MapLayer.js?a679:24)
    at new t (react-leaflet-markercluster.min.js?a99b:1)
    at constructClassInstance (react-dom.development.js?cada:11447)
    at updateClassComponent (react-dom.development.js?cada:13144)
    at beginWork (react-dom.development.js?cada:13824)
    at performUnitOfWork (react-dom.development.js?cada:15863)
    at workLoop (react-dom.development.js?cada:15902)
    at HTMLUnknownElement.callCallback (react-dom.development.js?cada:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:138)

I'v tried @webcarrot's recommendation and still no dice. I have tried playing with 1000 different dependency combinations with no success clearing npm cache etc.

Kind at a loss right now. Any help is much appreciated.

[yuzhva]

@webdobe

You need to install all peerDependencies:

yarn add leaflet.markercluster leaflet react-leaflet prop-types

Then install next release of that plugin:

yarn add react-leaflet-markercluster@next

Previously try to remove node_modules and clean all lock files if you have them to reset prev. versions.

[webdobe]

@yuzhva

Thank you soo much! I think I was missing prop-types when I was doing that exact same thing. I also ended up removing react and react-dom from my package.json and added that to the above just for good measure as it was complaining about my version of those as well.

[jwmann]

@yuzhva

I'm still getting the above error and I'm using 2.0.0-rc3

package.json

{
    "leaflet": "^1.4.0",
    "leaflet.markercluster": "^1.4.1",
    "react-leaflet": "^2.2.0",
    "react-leaflet-markercluster": "^2.0.0-rc3",
}

component

import { Map, CircleMarker, Tooltip, TileLayer } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';

component.less

@import '~leaflet/dist/leaflet.css?url=false';
@import '~leaflet.markercluster/dist/MarkerCluster.css';
@import '~leaflet.markercluster/dist/MarkerCluster.Default.css';
@import '~react-leaflet-markercluster/dist/styles.min.css';

[jwmann]

Oddly, if I specifically use the dist version like the OP's example

import MarkerClusterGroup from 'react-leaflet-markercluster/dist/react-leaflet-markercluster';

It seems to work. (I had to set a maxZoom for the Map but that was a minor issue)