Error: export 'markerClusterGroup' (imported as 'L') was not found in 'leaflet'

[poultryAppIndia]

global Angular CLI version (14.2.4)
local version (12.2.18).

"@types/leaflet": "^1.7.9",
"@types/leaflet-polylinedecorator": "^1.6.1",
"@types/leaflet-rotatedmarker": "^0.2.2",
"@types/leaflet.markercluster": "^1.4.6",

"leaflet": "^1.7.1",
"leaflet-arrowheads": "^1.2.3",
"leaflet-drift-marker": "^2.0.0",
"leaflet-polylinedecorator": "^1.6.0",
"leaflet-rotatedmarker": "^0.2.0",
"leaflet-routing-machine": "^3.2.12",
"leaflet.marker.slideto": "^0.3.0",
"leaflet.markercluster": "^1.5.3",

/node_modules/@asymmetrik/ngx-leaflet-markercluster/__ivy_ngcc__/dist/leaflet-markercluster/leaflet-markercluster.directive.js:18:34-54 - Error: export 'markerClusterGroup' (imported as 'L') was not found in 'leaflet' (possible exports: Bounds, Browser, CRS, Canvas, Circle, CircleMarker, Class, Control, DivIcon, DivOverlay, DomEvent, DomUtil, Draggable, Evented, FeatureGroup, GeoJSON, GridLayer, Handler, Icon, ImageOverlay, LatLng, LatLngBounds, Layer, LayerGroup, LineUtil, Map, Marker, Mixin, Path, Point, PolyUtil, Polygon, Polyline, Popup, PosAnimation, Projection, Rectangle, Renderer, SVG, SVGOverlay, TileLayer, Tooltip, Transformation, Util, VideoOverlay, bind, bounds, canvas, circle, circleMarker, control, default, divIcon, extend, featureGroup, geoJSON, geoJson, gridLayer, icon, imageOverlay, latLng, latLngBounds, layerGroup, map, marker, noConflict, point, polygon, polyline, popup, rectangle, setOptions, stamp, svg, svgOverlay, tileLayer, tooltip, transformation, version, videoOverlay)

[kprasad99]

Getting same error for me as well. my angular version is 13.3.0

[kprasad99]

I solved this problem by setting "allowSyntheticDefaultImports": true in tsconfig.json