Importing MarkerClusterGroup results in TypeError #71
Comments
|
I have the same issue with: Is there a recommended version for these libraries? |
|
This plugin does not support |
|
Any plans to update it to include v2 support? |
|
@ThiefMaster yep, I will try to deliver it during the next week. So since today, I need to update this lib. And since v2.0 there will be support of |
|
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); |
|
@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: 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 (= |
|
Hi.
Sorry for my English. |
Yep, you are right. Already fixed it in
The repeating word Gives a cleaner way of using props for event handlers. |
|
The 2.0.0-rc3 version works flawlessly with my use case. Thanks. |
|
I'm getting similar behavior and cannot get past it for the life of me. I hit the error: If I add leaflet.js directly to the index.html 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. |
|
You need to install all peerDependencies: Then install Previously try to remove |
|
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. |
|
I'm still getting the above error and I'm using package.json component component.less |
|
Oddly, if I specifically use the dist version like the OP's example It seems to work. (I had to set a maxZoom for the Map but that was a minor issue) |
|
For me, with react-leaflet 2 worked solution from #issuecomment-403071677 import { MapLayer, withLeaflet } from '../src'
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);Dependencies version: |
|
In case someone using Next.js stumbles upon here and use react-leaflet-universal (as I did), I confirm the rc3 works properly! You have to use next's Deps : |
I get the following error |
import { MapLayer, withLeaflet } from "react-leaflet";
import "leaflet.markercluster";
import { MarkerClusterGroupProps } from "react-leaflet-markercluster";
// https://github.com/YUzhva/react-leaflet-markercluster/issues/71#issuecomment-466393028
class MarkerClusterGroup extends MapLayer {
createLeafletElement(props: MarkerClusterGroupProps) {
// @ts-ignore
const el = new L.markerClusterGroup(props);
this.contextValue = {
...props.leaflet,
layerContainer: el,
};
return el;
}
}
export default withLeaflet(MarkerClusterGroup);gives this error UPD it seems I found why, because somehow leaflet resolves to different packages (hello webpack). As the result execution gets to this point: function toLatLngBounds(a, b) {
if (a instanceof LatLngBounds) {
return a;
}
return new LatLngBounds(a, b);
}where
|
|
@stereobooster I am stumbling upon the same problem, did you find any solution for this with Typescript? |
|
@saadsaifse end up using mapbox (with open source tiles) |
|
@stereobooster that's for the base layers I presume? How did you manage to get marker clustering without Leaflet? |
|
@saadsaifse first result from googling "mapbox cluster" https://docs.mapbox.com/mapbox-gl-js/example/cluster/ |
|
I was also getting type errors, e.g. "TypeError: Cannot read property 'removeLayer' of undefined". However, using the code posted by @adambisek plus a css import, it seems to work. Here is the (slightly) modified code, |
|
@yuzhva i have same problems with below versions. I read all comments and tried a lot of things but i couldn't solve this problem. What should i try ?
|
|
You are not supported to use Try to remove and then add yarn remove leaflet.markercluster
yarn add leaflet.markercluster
|
@yuzhva are you sure |
|
oh yeah, I mixed up @umitduran what version of |
|
@yuzhva my versions are below
|
|
There is a new version of Did you try to remove yarn remove react-leaflet-markercluster
yarn add react-leaflet-markercluster |
|
Hi all! I get the same issue. I'm using leaftlet to make some panels in grafana. First time I load my map, everything is fine, but if I go into another page with a map and then come back to my clustered map it's not reconizing my instanceof LatLngBounds in this code: function toLatLngBounds(a, b) { |
|
Hi ! i've the same problem but i'm using react-leaflet 3.0.0. |
|
Hello, @Riuborth Currently, this wrapper does not work with react-leaflet v3 - the issue is already created I will take a look at how it could be implemented with v3 during those weekends. any contribution is welcome UPD: yarn add react-leaflet-markercluster@next # yarn
npm install react-leaflet-markercluster@next # npm |
|
@asgaraliyev In case, if you are using v3 of |
|
I am having similar problem with v3.
Here is a versions I use. |
Same problem, cannot visualize the map. |
|
I have the same problem: I'll be very thankful if anyone helps :) |
|
@AliBayatpour - declare module 'react-leaflet-markercluster' { } to a global.d.ts file, fixed the "'MarkerClusterGroup' cannot be used as a JSX component" for me. |
I am receiving the following error when trying to use this package.
TypeError: Super expression must either be null or a function, not objectThe 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:
Related Import Statements
The text was updated successfully, but these errors were encountered: