struggling to locate name using typescript and deno

Here is the snippet of code I'm working with:

/**
 * map.ts
 */


// @deno-types="./libs/@types/geojson/index.d.ts"
// @deno-types="./libs/@types/mapbox-gl/index.d.ts"

mapboxgl.accessToken =  "toto";

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
  });

Despite importing the mapbox definition as follows:

// @deno-types="./libs/@types/geojson/index.d.ts"
// @deno-types="./libs/@types/mapbox-gl/index.d.ts"

I encountered this error:

error: TS2304 [ERROR]: Cannot find name 'mapboxgl'.
mapboxgl.accessToken =  "toto";
~~~~~~~~
    at file:///home/bussiere/Workspace/testdeno2/map.ts:9:1

TS2304 [ERROR]: Cannot find name 'mapboxgl'.
var map = new mapboxgl.Map({
              ~~~~~~~~
    at file:///home/bussiere/Workspace/testdeno2/map.ts:11:15

Found 2 errors.

How can I correctly import the definition so that I can use the name and its definitions?

Here is the link to the corresponding GitHub repository: https://github.com/bussiere/testdeno2

Edit:

Below is the uncaught error message:

error: Uncaught (in promise) RuntimeError: unreachable
    at <anonymous> (wasm://wasm/00247702:1:336403)
    at <anonymous> (wasm://wasm/00247702:1:341096)
    at <anonymous> (wasm://wasm/00247702:1:339419)
    at <anonymous> (wasm://wasm/00247702:1:339781)
    at <anonymous> (wasm://wasm/00247702:1:336272)
    at <anonymous> (wasm://wasm/00247702:1:268321)
    at minify (wasm://wasm/00247702:1:253183)
    at minify (https://deno.land/x/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="177a7e797e717e726557612639263926">[email protected]</a>/wasm.js:98:14)
    at minify (https://deno.land/x/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e9848087808f808c9ba99fd8c7d8c7d8">[email protected]</a>/mod.ts:27:10)
    at https://deno.land/x/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9d4d0d7d0dfd0dccbf9cf8897889788">[email protected]</a>/cli.ts:53:3

Regards

typescriptdeno

Answer №1

If you're looking to update or downgrade a library without having to manually copy it to your repository, consider installing the package from skypack or pika for easier management.

To cache a third-party library, use the command deno info

deno info "https://cdn.skypack.dev/@types/mapbox-gl"
or 
deno info "https://cdn.pika.dev/mapbox-gl@^2.2.0"

Import the mapbox-gl library with type definitions

// @deno-types="./libs/@types/mapbox-gl/index.d.ts"
import mapboxgl from "https://cdn.skypack.dev/mapbox-gl";
// or import mapboxgl from "https://cdn.pika.dev/mapbox-gl@^2.2.0";

mapboxgl.accessToken = "toto";

const map = new mapboxgl.Map({
  container: "map", // container id
  style: "mapbox://styles/mapbox/streets-v11", // style URL
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9, // starting zoom
});

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

Angular: Effective communication between components through routing and Observable binding ultimately results in the advancement of ngtsc(233

I designed an Angular Component named "crear-pedido" that exhibits a catalog of items (using row of products) and my aim is for the user to have the ability to click on the values in the ID column and navigate the application to a subordinate component kno ...

angulartypescript

Error: No default Firebase App named '[DEFAULT]' exists. Please remember to call Firebase App.initializeApp() to create the app (app/no-app). This issue is located at the app

Currently, I am in the process of learning how to integrate Firebase Functions into an Ionic + Angular project. My goal is to develop a custom function that retrieves all games from a collection and returns an array sorted by the "count" attribute. Initia ...

node.jsangulartypescriptgoogle-cloud-firestoregoogle-cloud-functions

What is the process for utilizing ts-node ESM in conjunction with node modules?

Disclaimer: I understand that the question below pertains to an experimental feature. I have initiated a thread on the ts-node discussion forum. Nonetheless, I believe that posting on StackOverflow will garner more visibility and potentially result in a qu ...

node.jstypescriptts-node

Overloading TypeScript functions with Observable<T | T[]>

Looking for some guidance from the experts: Is there a way to simplify the function overload in the example below by removing as Observable<string[]> and using T and T[] instead? Here's a basic example to illustrate: import { Observable } from ...

typescript

How can I prevent right-clicking with Ctrl+LeftMouseClick in Firefox on MacOS?

I'm looking to implement a shortcut using Ctrl+LeftMouseClick in my React project. It functions perfectly on Chrome on my Mac, but in Firefox the shortcut initiates a right mouse click (event.button = 2). I believe this may be due to MacOS's Rig ...

javascriptreactjstypescriptkeyboard-shortcutsmouseclick-event

Guide to correcting the file path of an external css within the public directory on Express framework

I am facing an issue with loading external CSS files and need some help to fix the path. Despite multiple attempts, I have been unsuccessful so far. Below is my category structure: https://i.stack.imgur.com/sLTcN.png Within the header.ejs file, this is h ...

node.jstypescriptexpressejs

Troubleshooting Google Authorization Issue in Angular 17: How to Fix the Error TS2304: 'google' Not Found in Angular 17

I am encountering an issue while attempting to integrate Google Auth into my Angular(+Express) application using the Google Identity Services library. Despite following the instructions provided in the Google tutorial, I am facing the error: "[ERROR] TS230 ...

javascripttypescriptgoogle-apigoogle-oauthangular17

Using the useEffect hook with Redux-Toolkit dispatch causes an endless cycle of execution

Issue I am encountering an infinite loop problem when using useMutation from react-query to make post requests, retrieve user information from JSON, and then store it in my redux store using useEffect based on the status provided by the useMutation hook. ...

reactjstypescriptreduxreact-hooksreact-query

Exploring the Differences between Angular's Http Module and the Fetch API

While I grasp the process Angular uses for HTTP requests, I find myself leaning towards utilizing the Fetch API instead. It eliminates the need to subscribe and unsubscribe just for a single request, making it more straightforward. When I integrated it int ...

javascriptangulartypescripthttp

"Troubleshooting issues with data loading using React's useEffect function

While working on my project, I encountered a strange issue where the isLoading state is being set to false before the data fetching process is completed. I am using the useEffect hook to show a loading spinner while fetching data from an API, and then disp ...

javascriptreactjstypescriptreact-hooks

Using Typescript: A guide on including imported images in the output directory

typings/index.d.ts declare module "*.svg"; declare module "*.png"; declare module "*.jpg"; tsconfig.json { "compilerOptions": { "module": "commonjs", "target": "es5", "declaration": true, "outDir": "./dist" }, ...

typescript

How to simulate a particular class from a node package using Jest mocks

In my project, I'm looking to specifically mock the Socket class from the net node module. The documentation for this can be found here. Within my codebase, there is a class structured similar to the following... import { Socket } from 'net&apo ...

javascripttypescripttestingjestjs

When using Angular, it is important to remember that calling `this.useraccount.next(user)` may result in an error stating that an argument of type 'HttpResponse<any>' cannot be used with a 'Useraccount' balance

When attempting to use this.useraccountsubject(user) to insert information upon login, I encountered an error: ErrorType: this.useraccount.next(user) then Error An argument of type 'HttpResponse' is not allowed against a balance of 'Userac ...

javascriptangulartypescripthttpresponseangular12

Tips for utilizing regex to locate words and spaces within a text?

I'm feeling so frustrated and lost right now. Any help you can offer would be greatly appreciated. I am currently dealing with an issue in Katex and Guppy keyboard. My goal is to create a regex that will identify the word matrix, locate the slash that ...

javascriptregextypescriptkatex

Swapping out 'useResult' in graphql for Vue and Apollo: A step-by-step guide

I need to replace the useResult function that is fetching data from GraphQL with a computed function. const locationOptions = useResult( result, [], ({ getLocations }): Option[] => formatOptions(getLocations) ) Instead, I want ...

javascripttypescriptvue.jsgraphqlapollo

React - retrieving the previous page's path after clicking the browser's "back" button

Imagine I'm on Page X(/path-x) and then navigate to page Y(/path-y). Later, when I click the "back" button in the browser. So my question is, how do I retrieve the value of /path-y in PageX.tsx? Note: I am utilizing react-router-dom ...

javascriptreactjstypescript

updating rows in a table

Currently, I have a grid array filled with default data retrieved from the database. This data is then displayed on the front end in a table/grid format allowing users to add and delete rows. When a row is added, I only want to insert an empty object. The ...

javascriptangulartypescript

Perform an HTTP GET request to a RESTful service with specified parameters using Angular 2

I'm currently facing an issue while attempting to create a GET request to the YouTube Web API. I'm struggling with passing parameters through the http.get function and have confirmed the request is being sent using Fiddler. However, I keep receiv ...

angularjstypescriptangular

The C# private property is inaccessible during a TypeScript callback as it is not contained within the

I'm encountering an issue with TypeScript where the callback function is only returning _proto in the response's .data property when I set private properties in C# and instantiate an object filled with constructed properties. Strangely, if the pr ...

c#angularjscallbacktypescriptpromise

Leveraging NgRx for Managing Arrays

export class Ingredient { public name: string; public amount: number; constructor(name: string, amount: number) { this.name = name; this.amount = amount; } } List of Ingredients: export const initialIngredients: Ingredient ...

arraysangulartypescripttypeerrorngrx