How to fix 'TypeError: leaflet__WEBPACK_IMPORTED_MODULE_7___default.a.markerClusterGroup is not a function'

Question

I am trying to implement marker cluster on my multiple markers but I keep getting type error.

TypeError: leaflet__WEBPACK_IMPORTED_MODULE_7___default.a.markerClusterGroup is not a function

this.map = L.map('map',{
            center:[28,84],
            zoom:7,
        });

        let locations = [
            ["LOCATION_1",28, 84],
            ["LOCATION_2",28.2, 85],
            ["LOCATION_3",28.1, 84],
            ["LOCATION_4",28.1, 84],
            ["LOCATION_5",28.01, 84]
        ];

        let greenIcon = L.icon({
            iconUrl: 'someUrl',        
            iconSize:[30, 30], // size of the icon
         });

         let markers = L.markerClusterGroup();

         for (let i = 0; i < locations.length; i++) {
            let marker = new L.marker([locations[i][1],locations[i][2]], {icon: greenIcon})
                .bindPopup(locations[i][0])
                .addTo(this.map);
            markers.addLayer(marker);
        }

        this.map.addLayer(markers);

Answer 1

You just need to import it:

import 'leaflet.heat';

[rest of the code]

Copying it from the answer it the comment, just to make it easier to find by others strugglling with this exception.