markerClusterGroup does not exist on type 'typeof import("@types/leaflet/index")

[helxsz]

I am using angular 7 with leaflet and makercluster with versions

"leaflet": "^1.6.0",
"leaflet.markercluster": "^1.4.1"

compiling the project gives me the error

ERROR in/map.component.ts(83,28): error TS2339: Property 'markerClusterGroup' does not exist on type 'typeof import("project/client/node_modules/@types/leaflet/index")'.

Is this the leaflet version problem?

[rp0m]

I'm having a similar issue, however at compile time. To address the issue above @helxsz, you need to ensure to import both leaflet and leaflet.markercluster in your component, e.g:

import * as L from 'leaflet';
import * as L1 from 'leaflet.markercluster';

private myClusterGroup = L.markerClusterGroup();

My issue is that even though this compiles OK, it fails at runtime:

unhandled error:  Error: Uncaught (in promise): TypeError: leaflet__WEBPACK_IMPORTED_MODULE_2__.markerClusterGroup is not a function
TypeError: leaflet__WEBPACK_IMPORTED_MODULE_2__.markerClusterGroup is not a function

Same as you I am using leaflet 1.6.0 and leaflet.markercluster 1.4.1 on Angular 7, what's interesting is following along with one of the samples (http://jsbin.com/fimaxap/2/edit?html,js,output) works just fine when running locally... no idea what's wrong :/

PS. both scripts are referenced in my angular.json:

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/leaflet/dist/leaflet.js",
              "node_modules/leaflet.markercluster/dist/leaflet.markercluster-src.js",
              "node_modules/proj4/dist/proj4.js",
              "node_modules/proj4leaflet/src/proj4leaflet.js"
            ],

[rp0m]

I think this was a simple import mistake with angular, changing imports to the following, resolves this issue:

import * as L from 'leaflet';
import 'leaflet.markercluster';

// Compile & run = OK
private myClusterGroup = L.markerClusterGroup();

[R1cs1KING]

I added this package: https://www.npmjs.com/package/@types/leaflet.markercluster and it worked for me

[amaranter]

import "leaflet";
import "leaflet.markercluster/src";
  
(L as any).markerClusterGroup({
    showCoverageOnHover: false
});

[ghost]

For people runing into the same issue and using typescript try adding: yarn add -D @types/leaflet.markercluster

[anne-gropler]

The only way I could make it work with was this. (in case somebody still could not make it work with the help above)

import * as L from 'leaflet';
import 'leaflet.markercluster';
import {MarkerClusterGroup, markerClusterGroup} from 'leaflet'; // actually from leaflet.markercluster

const m1 = new MarkerClusterGroup();
const m2 = markerClusterGroup();
// ...

Unfortunately, my IDE still wants to autofill the L. before the markercluster stuff. But at least it compiles now and doesn't throw any runtime errors.

[bogu399]

I think this was a simple import mistake with angular, changing imports to the following, resolves this issue:

import * as L from 'leaflet';
import 'leaflet.markercluster';

// Compile & run = OK
private myClusterGroup = L.markerClusterGroup();

I could import the package, however I got this error on browser console. Any tips? Uncaught ReferenceError: L is not defined leaflet.markercluster-src.js:17

[GeorgeKnap]

Our usage of leaflet markercluster starting throwing error in runtime TypeError: (0 , import_leaflet2.markerClusterGroup) is not a function env: Angular 17 + esbuild

this is how I use it:

import {  markerClusterGroup } from 'leaflet';
import 'leaflet.markercluster';

const clusterGroup = markerClusterGroup({ spiderfyDistanceMultiplier: 4 });

This is how esbuild creates the chunk:

// node_modules/leaflet/dist/leaflet-src.js
var require_leaflet_src = __commonJS({
  "node_modules/leaflet/dist/leaflet-src.js"(exports, module) {
...
});

// node_modules/leaflet.markercluster/dist/leaflet.markercluster-src.js
var require_leaflet_markercluster_src = __commonJS({
  "node_modules/leaflet.markercluster/dist/leaflet.markercluster-src.js"(exports, module) {
...
})

// libs/map/src/lib/leaflet/leaflet-map.component.ts
var import_leaflet2 = __toESM(require_leaflet_src());
var import_leaflet3 = __toESM(require_leaflet_markercluster_src()); 

const clusterGroup = (0, import_leaflet2.markerClusterGroup)({ spiderfyDistanceMultiplier: 4 });

important to see here:

• variable import_leaflet3 is not used anywhere, it's just generated because we did import 'leaflet.markercluster';
• constant clusterGroup is created from import_leaflet2 because that is how we specified it via types - it is mported from leaflet, not leaflet.markercluster. In my opinion that constant should use import_leaflet3 but so far I do not know how to satisfy type checking here...

edit: SOLVED Missing import of LeafletMarkerClusterModule into the component import { LeafletMarkerClusterModule } from '@asymmetrik/ngx-leaflet-markercluster';

compiler now correctly generates

 const clusterGroup = (0, import_leaflet3.markerClusterGroup)({ spiderfyDistanceMultiplier: 4 });