[Typescript]Vreemd import-statement bij maplibre-gl

[Skyaero]

Mijn vraag
Ik probeer Maplibre-gl te gebruiken binnen Typescript om kaarten te genereren in een webapplicatie.

Ik heb daarvoor een script dat er zo uitziet (conform het voorbeeld dat in de documentatie van maplibre staat).

mymap.ts:

TypeScript:

import <iets> from 'maplibre-gl';

new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-74.5, 40],
    zoom: 9
});

In mijn html bestand gebruik ik importmap om de maplibre bibliotheek te laden:

HTML:

    <script type="importmap" asp-append-version="true">
        {
          "imports": {
            "maplibre-gl": "https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"
          }
        }
    </script>
    <script src="~/js-test/mymap.min.js" type="module" asp-append-version="true"></script>

De vraag is wat er bij <iets> moet komen te staan. Kom ik zo op terug.

Relevante software en hardware die ik gebruik
Visual Studio 2022 (laatste editie)
Asp.Net 8
maplibre-gl 4.1.1 ingeladen via libman
Firefox (laatste editie)

Wat ik al gevonden of geprobeerd heb
Maplibre documentatie geeft geen direct voorbeeld van hoe de library te gebruiken met typescript. Gebaseerd op de code moet ik 'maplibregl' of 'Map' gaan inladen.

Het meest logische antwoord, wat ik ook ergens op stackoverflow tegenkwam is

TypeScript:

import maplibregl from 'maplibre-gl';

Dit werkt echter niet. De foutmelding is import not found: default

De volgende syntax werkt ook niet:

TypeScript:

// Fout: import not found
import { maplibregl } from 'maplibre-gl'

// Fout: import not found
import { Map } from 'maplibre-gl'

// Fout: maplibregl.Map is not a constructor
import * as maplibregl from 'maplibre-gl'

De import geheel weghalen geeft de foutmelding dat maplibregl niet gevonden kon worden.

Wat wel werkt is

TypeScript:

// Ik kan hier elke letter neerzetten, behalve 'maplibregl'
import * as M from 'maplibre-gl'

Als ik vervolgens in de browser-console M wil bekijken, krijg ik de melding dat M is undefined. Het rare is dat het statement new maplibregl.Map() gewoon werkt, terwijl ik 'maplibregl' of 'map niet heb geladen. Ik krijg bij deze import statement dan ook inderdaad de kaart te zien.

Ik snap dus absoluut niet waarom dit werkt. Nergens in documentatie over javascript modules, typescript en maplibre-gl staat hier iets over.

[Merethil]

Skyaero schreef op maandag 18 maart 2024 @ 08:38:
Mijn vraag
Ik probeer Maplibre-gl te gebruiken binnen Typescript om kaarten te genereren in een webapplicatie.

Ik heb daarvoor een script dat er zo uitziet (conform het voorbeeld dat in de documentatie van maplibre staat).

mymap.ts:

TypeScript:

import <iets> from 'maplibre-gl';

new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-74.5, 40],
    zoom: 9
});

In mijn html bestand gebruik ik importmap om de maplibre bibliotheek te laden:

HTML:

    <script type="importmap" asp-append-version="true">
        {
          "imports": {
            "maplibre-gl": "https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"
          }
        }
    </script>
    <script src="~/js-test/mymap.min.js" type="module" asp-append-version="true"></script>

De vraag is wat er bij <iets> moet komen te staan. Kom ik zo op terug.

Relevante software en hardware die ik gebruik
Visual Studio 2022 (laatste editie)
Asp.Net 8
maplibre-gl 4.1.1 ingeladen via libman
Firefox (laatste editie)

Wat ik al gevonden of geprobeerd heb
Maplibre documentatie geeft geen direct voorbeeld van hoe de library te gebruiken met typescript. Gebaseerd op de code moet ik 'maplibregl' of 'Map' gaan inladen.

Het meest logische antwoord, wat ik ook ergens op stackoverflow tegenkwam is

TypeScript:

import maplibregl from 'maplibre-gl';

Dit werkt echter niet. De foutmelding is import not found: default

De volgende syntax werkt ook niet:

TypeScript:

// Fout: import not found
import { maplibregl } from 'maplibre-gl'

// Fout: import not found
import { Map } from 'maplibre-gl'

// Fout: maplibregl.Map is not a constructor
import * as maplibregl from 'maplibre-gl'

De import geheel weghalen geeft de foutmelding dat maplibregl niet gevonden kon worden.

Wat wel werkt is

TypeScript:

// Ik kan hier elke letter neerzetten, behalve 'maplibregl'
import * as M from 'maplibre-gl'

Als ik vervolgens in de browser-console M wil bekijken, krijg ik de melding dat M is undefined. Het rare is dat het statement new maplibregl.Map() gewoon werkt, terwijl ik 'maplibregl' of 'map niet heb geladen. Ik krijg bij deze import statement dan ook inderdaad de kaart te zien.

Ik snap dus absoluut niet waarom dit werkt. Nergens in documentatie over javascript modules, typescript en maplibre-gl staat hier iets over.

Kan je het niet gewoon zo doen?
https://maplibre.org/maplibre-gl-js/docs/API/

Ze geven aan dat ze
[code=typescript]
import {Map} from 'maplibre-gl';
const map = new Map(...)
[/]
doen; door `Map` expliciet te importen hoef je dus geen `maplibergl.` meer te gebruiken.

Shit, ik zag die niet in je voorbeelden. Excuus

[Kheos]

je hebt die library wel degelijk lokaal staan (ik assume dan dat je met npm die hebt geinstalleerd?)

wat exporteert die library dan?
werken deze instructies niet?
https://www.npmjs.com/package/maplibre-gl

[WernerL]

De TS zegt dat hij gebruik maakt van importmap in een script-tag dus ik gok dat de library lokaal niet staat in een node_modules folder. Dat is de reden dat de TypeScript compiler de package niet kan vinden.

Oplossing is de package lokaal installeren met npm install. En dan heb je die importmap ook niet meer nodig.

De library zelf is ook geschreven in TypeScript dus raar dat de developers niet betere instructies op hun readme zetten.

[ Voor 17% gewijzigd door WernerL op 18-03-2024 12:58 ]

[Skyaero]

Merethil schreef op maandag 18 maart 2024 @ 11:05:
[...]


Kan je het niet gewoon zo doen?
https://maplibre.org/maplibre-gl-js/docs/API/

Nee, dat werkt dus niet.

Kheos schreef op maandag 18 maart 2024 @ 11:12:
je hebt die library wel degelijk lokaal staan (ik assume dan dat je met npm die hebt geinstalleerd?)

Via libman staat ook de library lokaal. Typescript compileert ook gewoon. Het is pas in de browser dat ik de foutmelding krijg.

werken deze instructies niet?
https://www.npmjs.com/package/maplibre-gl

Dit is voor javascript, niet voor typescript.

WernerL schreef op maandag 18 maart 2024 @ 12:54:
De TS zegt dat hij gebruik maakt van importmap in een script-tag dus ik gok dat de library lokaal niet staat in een node_modules folder. Dat is de reden dat de TypeScript compiler de package niet kan vinden.

Package is lokaal geinstalleerd via libman. Typescript compileert ook gewoon.

Ik denk dat ik maar eens een issue ga aanmaken op github.

[Kheos]

Skyaero schreef op maandag 18 maart 2024 @ 13:22:

Dit is voor javascript, niet voor typescript.

en typescript transcompileert naar...

[Skyaero]

1 stap verder, typescript is het probleem niet.

Dit zou moeten werken, maar doet het niet

HTML:

<html>
<head>
    <script type="importmap">
        {
            "imports": {
                "maplibre-gl": "https://unpkg.com/maplibre-gl@4.1.1/dist/maplibre-gl.js"
            }
        }
    </script>
    <script type="module">
        import { Map } from 'maplibre-gl';

        new Map({
            container: 'map',
            style: 'https://demotiles.maplibre.org/style.json', 
            center: [-74.5, 40],
            zoom: 9
        });
    </script>
</head>
<body>
    <section id="map">
    </section>
</body>
</html>

Mogelijk kloppen de exports in maplibre-gl niet.

[Skyaero]

Ik zal voor de volledigheid maar antwoord op mijn eigen vraag geven naar aanleiding van een issue op github: maplibre-gl in combinatie met typescript werkt niet, omdat men deels nog met commonjs exports (globals) gebruikt ipv ESM.

Het volgende werkt bijvoorbeeld wel

HTML:

<html>
<head>
    <script type="importmap">
        {
            "imports": {
                "maplibre-gl": "https://unpkg.com/maplibre-gl@4.1.1/dist/maplibre-gl.js"
            }
        }
    </script>
    <script type="module">
        import 'maplibre-gl';

        new maplibregl.Map({
            container: 'map',
            style: 'https://demotiles.maplibre.org/style.json', 
            center: [-74.5, 40],
            zoom: 9
        });
    </script>
</head>
<body>
    <section id="map">
    </section>
</body>
</html>

Alleen zal typescript niet begrijpen dat maplibregl als global wordt ingeladen en dus bij het compileren een foutmelding geven.

op zoek naar een andere library dus.

[ThomasG]

Skyaero schreef op dinsdag 19 maart 2024 @ 08:27:
Ik zal voor de volledigheid maar antwoord op mijn eigen vraag geven naar aanleiding van een issue op github: maplibre-gl in combinatie met typescript werkt niet, omdat men deels nog met commonjs exports (globals) gebruikt ipv ESM.

Het volgende werkt bijvoorbeeld wel

HTML:

<html>
<head>
    <script type="importmap">
        {
            "imports": {
                "maplibre-gl": "https://unpkg.com/maplibre-gl@4.1.1/dist/maplibre-gl.js"
            }
        }
    </script>
    <script type="module">
        import 'maplibre-gl';

        new maplibregl.Map({
            container: 'map',
            style: 'https://demotiles.maplibre.org/style.json', 
            center: [-74.5, 40],
            zoom: 9
        });
    </script>
</head>
<body>
    <section id="map">
    </section>
</body>
</html>

Alleen zal typescript niet begrijpen dat maplibregl als global wordt ingeladen en dus bij het compileren een foutmelding geven.

op zoek naar een andere library dus.

Het ligt niet aan de library. Het probleem is dat je LibMan gebruikt, en niet een package manager als npm of yarn in combinatie met bijv. webpack of vite. In de documentatie van LibMan staat ook nadrukkelijk aangegeven dat LibMan dáár geen vervanger voor is, enkel voor het binnen hengelen van (eenvoudige) JS libraries.