Typescript error: 'MarkerClusterGroup' cannot be used as a JSX component.

[matheusmb]

Hi, I'm trying to use it with TypeScript but I'm receiving the following error:

TypeScript error in /src/components/DashCard/Map/Map.tsx(71,12):
'MarkerClusterGroup' cannot be used as a JSX component.
  Its instance type 'MarkerClusterGroup<any>' is not a valid JSX element.
    Type 'MarkerClusterGroup<any>' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.  TS2786

    69 |             url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    70 |           />
  > 71 |           <MarkerClusterGroup>
       |            ^
    72 |             <Marker position={[-22.8878, -43.2993]}>
    73 |               <Popup>F12</Popup>
    74 |             </Marker>

The following packages versions are being used:

    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "leaflet": "^1.7.1",
    "react-leaflet": "^3.0.4",
    "react-leaflet-markercluster": "^3.0.0-rc1",
    "typescript": "4.1.2",

Anyone has a workaround on this?

[Silventino]

Same error here.

[Silventino]

As a workaround I've declared a .d.ts file with the following content:

declare module 'react-leaflet-markercluster' {
  import { Component } from 'react';
  export default class MarkerClusterGroup extends Component {}
}

If you need to pass props to MarkerClusterGroup, you'll have to change this file too.

[matheusmb]

Thanks @Silventino, the workaround worked for me

[dnehl]

same error here..

[k-matti]

same error here, don't know how to work around

[dnehl]

same error here, don't know how to work around

As a workaround I've wrapped the Markers in a javascript-component (without typescript), where I am using the Cluster.

const MarkerClustor = ({mapPoints}) => {
    return "<MarkerClusterGroup chunkedLoading={true} >
        <MapMarkers mapPoints={mapPoints} />
    </MarkerClusterGroup>"
}

[vitoorgomes]

thanks a lot @Silventino it worked like a charm! I don't know if someone is still looking to maintain this package and the types, but it could be a good PR to open

Again, thanks a lot!

[DorianMazur]

I think it should be

declare module 'react-leaflet-markercluster' {
    import { Component } from 'react';
    export default class MarkerClusterGroup extends Component<MarkerClusterGroupProps> {}
  }

[Silventino]

Much better!

[z3v0k]

same error here!

[EliteMasterEric]

Hey all,

The reason for this issue is the fact that this library relies on DefinitelyTyped for its typing, but the DefinitelyTyped definition only provides typing for version 2.0, which relies on react-leaflet v2's typing, which is completely different from how the new library works.

The ideal solution would be to convert this library to TypeScript; this would mean type definitions would be provided natively, and would be based on the types for react-leaflet v3, which also provides its own native typing.

Note that it appears another user has made their own library for marker clusters.

EDIT: For those reading this thread later, the library I linked now uses the MIT license and is thus safe to use for closed-source projects.

[tirli]

another user has made their own library for marker clusters.

Though this library is licensed under GPL, that is not an option for closed-source projects.

So having proper typings here is still required

[frf]

another user has made their own library for marker clusters.

Though this library is licensed under GPL, that is not an option for closed-source projects.

So having proper typings here is still required

Tnks @tirli it worked for me this markers clusters very easy

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[piotr-cz]

I was getting an error Non-abstract class 'MarkerClusterGroup' does not implement inherited abstract member 'render' from class 'Component<MarkerClusterGroupOptions, {}>'. ts(2515) so I tweaked @DorianMazur code like this:

/**
 * Type definitions for react-leaflet-markercluster:^3.0.0-rc1
 * Requires '@types/leaflet.markercluster'
 */
declare module 'react-leaflet-markercluster' {
  import { Component } from 'preact' // Switch to 'react' if you use it
  import { MarkerClusterGroupOptions } from 'leaflet'

  export default abstract class MarkerClusterGroup extends Component<MarkerClusterGroupOptions> {}
}

[fre-ben]

Thanks @piotr-cz for the snippet. Works fine for me :)

[codefadeev]

I was getting an error Non-abstract class 'MarkerClusterGroup' does not implement inherited abstract member 'render' from class 'Component<MarkerClusterGroupOptions, {}>'. ts(2515) so I tweaked @DorianMazur code like this:

/**
 * Type definitions for react-leaflet-markercluster:^3.0.0-rc1
 * Requires '@types/leaflet.markercluster'
 */
declare module 'react-leaflet-markercluster' {
  import { Component } from 'preact' // Switch to 'react' if you use it
  import { MarkerClusterGroupOptions } from 'leaflet'

  export default abstract class MarkerClusterGroup extends Component<MarkerClusterGroupOptions> {}
}

Hi.
I did not quite understand. Where did you write it and how did you work with it? I am a beginner and faced this problem.

[piotr-cz]

I was getting an error Non-abstract class 'MarkerClusterGroup' does not implement inherited abstract member 'render' from class 'Component<MarkerClusterGroupOptions, {}>'. ts(2515) so I tweaked @DorianMazur code like this:

/**
 * Type definitions for react-leaflet-markercluster:^3.0.0-rc1
 * Requires '@types/leaflet.markercluster'
 */
declare module 'react-leaflet-markercluster' {
  import { Component } from 'preact' // Switch to 'react' if you use it
  import { MarkerClusterGroupOptions } from 'leaflet'

  export default abstract class MarkerClusterGroup extends Component<MarkerClusterGroupOptions> {}
}

Hi. I did not quite understand. Where did you write it and how did you work with it? I am a beginner and faced this problem.

1. Install library types

   npm install --save-dev @types/leaflet.markercluster`

2. Create types/react-leaflet-markercluster.d.ts file with contents above
3. Add type overrides directory in tsconfig.json

   {
     "compilerOptions": {
       //...
     },
     "include": [
       "src",
       "types"
     ]
   }

[codefadeev]

Thanks @piotr-cz
And for newbies like me:

1. Create folder types with file react-leaflet-markercluster.d.ts in the root of the project
2. As in many demo projects on the Internet, I had react-leaflet-markercluster@2.0.0 installed
   This caused the page to not load.
   Delete npm uninstall react-leaflet-markercluster
   Install latest version npm install react-leaflet-markercluster
   Right now it is react-leaflet-markercluster@3.0.0-rc1