Error: export 'control' (imported as 'L') was not found in '@raruto/leaflet-elevation' (module has no exports)

Question

I have a angular application and need to use the custom leaflet package: https://github.com/Raruto/leaflet-elevation

I am trying to use this in my application. I install it like so:

npm i @raruto/leaflet-elevation

and then at the top of my page imported it like so: import * as L from '@raruto/leaflet-elevation';

    this.map =  L.map("map").setView([0.0, 0.0], 1);
    let googleRoadMap = L.gridLayer.googleMutant({
      type: 'roadmap'
    });

    googleRoadMap.addTo(this.map);
    L.control.elevation(elevation_options).addTo(this.map);

However I get the following error:

Error: export 'control' (imported as 'L') was not found in '@raruto/leaflet-elevation' (module has no exports)

Error: export 'map' (imported as 'L') was not found in '@raruto/leaflet-elevation' (module has no exports)

Error: export 'gridLayer' (imported as 'L') was not found in '@raruto/leaflet-elevation' (module has no exports)

 Error: export 'control' (imported as 'L') was not found in '@raruto/leaflet-elevation' (module has no exports)

I am new to JS and Angular etc I have come from PHP :) I am wondering how to solve this?

Thanks

Answer 1

The import * as L part is for the Leaflet base library.

Then depending on the plugin, you generally just have to import it for side effect, or you may have to import an explicit object as well.

In the case of @raruto/leaflet-elevation plugin, it looks like it is the former case, so you just have to do:

import * as L from "leaflet";
import "@raruto/leaflet-elevation";

this.map = L.map("map").setView([0.0, 0.0], 1);

L.control.elevation(elevation_options).addTo(this.map); // TS will warn here

Unfortunately, it looks like there is no TypeScript definition available for this @raruto/leaflet-elevation package. So TS will not know what L.control.elevation is. You can use a quick and dirty workaround:

(L.control as any).elevation(/* etc. */);

See https://github.com/ghybs/Leaflet.TileLayer.Fallback/issues/11 for further details and options.