Issue: the module '@raruto/leaflet-elevation' does not include the expected export 'control' as imported under the alias 'L' . This results in an error message indicating the absence of exports within the module

Looking for guidance on adding a custom Leaflet package to my Angular application called "leaflet-elevation". The package can be found at: https://github.com/Raruto/leaflet-elevation

I have attempted to integrate it by running the command:

npm i @raruto/leaflet-elevation

And then importing it at the beginning of my page like this: 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);

Despite following these steps, I encountered the following errors:

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)


As a newcomer to JS and Angular coming from a PHP background, I am seeking assistance on how to resolve this issue. Any advice would be greatly appreciated!

Thank you.

Answer №1

To utilize the Leaflet base library, you need to include import * as L.

Depending on the plugin, you may simply import it for side effects or import an explicit object.

For the @raruto/leaflet-elevation plugin, it seems that the former applies. You can simply use:

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); // TypeScript warning will occur here

Regrettably, there is no TypeScript definition accessible for the @raruto/leaflet-elevation package. This means TypeScript won't recognize L.control.elevation. Quick fix:

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

Refer to https://github.com/ghybs/Leaflet.TileLayer.Fallback/issues/11 for more details and alternatives.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to distribute npm packages on fortrabbit similar to composer?

Is there a seamless way to deploy npm packages on fortrabbit, similar to how fortrabbit handles composer packages? I have experimented with various methods: Using npm on the ssh CLI (though the fortrabbit docs warn against making permanent changes to fi ...

Revamp MUI class names with React Material UI's innovative randomization and elimination

Can names be randomized or Mui-classNames removed? https://i.stack.imgur.com/J6A9V.png Similar to the image displayed? (All CSS class names would be jssXXX) Appreciate your assistance. ...

Incorrect typings being output by rxjs map

combineLatest([of(1), of('test')]).pipe( map(([myNumber, myString]) => { return [myNumber, myString]; }), map(([myNewNumber, myNewString]) => { const test = myNewString.length; }) ); Property 'length' does not ...

Show real-time server responses using jQuery while waiting for the AJAX request to complete

I have a challenge in creating a function that displays the server response while waiting for Ajax to complete. Here's the scenario: I have selected 10 checkboxes. When I click the submit button, Ajax is triggered. On the server side, there is a loo ...

What is the best way to handle asynchronous actions while initializing a database in Next.js?

My goal is to create tables during the database initialization stage with a structure like this: CREATE TABLE IF NOT EXISTS users ( "id" SERIAL PRIMARY KEY, "created_at" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, "name&quo ...

NodeJS API integration failure during ReactJs login attempt

Currently, I am tackling a small project on implementing user login functionality in ReactJs with Nodejs and Express-session. The issue I am facing is that my front end (React login page) isn't functioning properly. Below is the Fetch API code snippet ...

Apply a Fade In transition to the ul li elements following a JavaScript toggle

I'm currently experimenting with implementing a Fade in from the right animation for the links displayed in the menu after toggling the menu body in the browser. Despite my efforts, I am unable to determine why the animation is not functioning as expe ...

Running a method at any given time within an ngFor loop in Angular 5

On my angular page, I am facing a challenge with updating a variable and displaying it in the HTML within an *ngFor loop. Here is an example of what I need: HTML: <table *ngFor="let data of Dataset"> somehowRunThis(data) <div>{{meth ...

Centering an image that is absolutely positioned within a container that is relatively positioned, horizontally

Looking to center an image that is positioned absolutely horizontally within a container that is relatively positioned. After attempting with CSS and not finding success, I ended up using Jquery. http://jsfiddle.net/CY6TP/ [This is my attempt using Jquery ...

Enhance the "text" attribute of IXMLDOMElement to enable functionality in Chrome

The web application I am currently working on was developed approximately 10 years ago and is only compatible with Internet Explorer. My goal is to make it functional in Chrome as well. I am facing a challenge regarding the "text" property of IXMLDOMEleme ...

A guide to simultaneously sending dual variables by implementing Ajax via JavaScript

I am currently facing an issue with a textarea and PHP variables. I have created a script as shown below: $(document).ready(function(){ $('.post').keyup(function(e){ var post = $.trim($('.post').val()); if (post != ...

Having difficulties achieving successful API requests in Next.js and Snipcart

I'm currently diving into the world of Snipcart, and I'm encountering some issues connecting to your API. I'm using Next.js and haven't been able to find any solutions on the forum or in the documentation that address my specific proble ...

Disable the functionality of the device's back button to prevent it from going back to the

For my project, I utilize popups to display important information to the user. When a popup is displayed, how can I override the functionality of the device's back button so that instead of navigating to the previous route, it will close the popup? ...

Tailored NodeJS compilation incorporating JavaScript modules

Can NodeJS be built together with specific JavaScript modules? I am aware that for native modules, node-gyp can assist with this, but I am unsure about how to accomplish this with JavaScript modules. My goal is to use a custom application without needing t ...

When trying to create a new project using `ng new project`, the path specified was not

I'm attempting to start an angular 4 project using angular-cli on my Windows 10 operating system. I followed the instructions outlined at https://www.npmjs.com/package/@angular/cli. Currently, I am running node - 7.6.0 and npm - 5.1.0. Every time I ...

Exploring Angular 2 Tabs: Navigating Through Child Components

Recently, I've been experimenting with trying to access the HTML elements within tabs components using an example from the Angular 2 docs. You can view the example here. Here is a snippet of my implementation: import {Component, ElementRef, Inj ...

npm not working to install packages from the package.json file in the project

When using my macbook air, I encounter an issue where I can only install npm packages globally with sudo. If I try to install a local package without the -g flag in a specific directory, it results in errors. npm ERR! Error: EACCES, open '/Users/mma ...

When selecting a MenuItem, only a ReactOwner has the ability to add a ref using addComponentAsRefTo(...)

I'm currently working on a basic component that looks like this: class App extends React.Component<{}, {}> { constructor() { super(); } render() { return ( <MuiThemeProvider muiTheme={muiTheme}> <div> ...

Obtaining a return value from a function that involves a series of chained Ajax requests in jQuery

I'm facing an issue with my function that involves chained Ajax requests. Function A and B are both Ajax requests, where A runs first and B runs after A returns its data. The problem arises when Function C executes Function B. Upon execution of Funct ...

The error message "Required parameter not provided" appeared when trying to utilize a nested dynamic route in Next.js

Issue: The error message indicates that the required parameter (plantName) was not provided as a string in getStaticPaths for /plants/[plantName]/streaming-data/[panel] The error above is being displayed. My folder structure follows this pattern: plants > ...