[typescript] import { Map } from maplibre-gl gives error 'cannot find Map' in browser #3855

roossienb · 2024-03-18T12:42:03Z

Software:

Visual Studio 2022
Libman to load libraries
maplibre-gl 4.1.1
Firefox

I'm trying to reproduce this example in Typescript using this import example.

mymap.ts:

import { Map } from 'maplibre-gl';

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

index.htm:

    <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>

Typescript compiles, but the browser gives the error import not found: Map

I've also tried (while using new maplibregl.Map() instead of new Map()):

// import not found: default
import maplibregl from 'maplibre-gl';

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

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

Is something going wrong with the exports?

The text was updated successfully, but these errors were encountered:

HarelM · 2024-03-18T13:46:11Z

How do you compile an html file as typescript? This is strange...
Please provide stackblitz/jsbin reproduction.

roossienb · 2024-03-18T13:58:18Z

How do you compile an html file as typescript? This is strange... Please provide stackblitz/jsbin reproduction.

I compile the mymap.ts file to mymap.min.js and have that javascript file loaded by the html page.

neodescis · 2024-03-18T17:05:08Z

I think most folks also use some sort of bundler, but it seems like this should work. I've never used an importmap though. It might be somewhat complicated by "Map" already existing though. Have you tried aliasing the import?

import { Map as MapLibre } from 'maplibre-gl'

roossienb · 2024-03-18T19:01:24Z

importmap is needed to be able to use a CDN, otherwise the import always looks for a local file.

I've simplified the problem, because it looks like it has nothing to do with typescript.

<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>

This should work, but doesn't as it cannot find 'Map'. An alias doesn't solve it either.

import * as M from 'maplibre-gl'

results in a module M that exists, but that module does not contain M.Map() or M.default.Map().

I think something is going wrong with exports in the maplibre-gl library.

HarelM · 2024-03-19T06:40:26Z

The following will work due to how maplibre package is built:

<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>

HarelM · 2024-03-19T06:43:59Z

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

This issue was moved to a discussion.

[typescript] import { Map } from maplibre-gl gives error 'cannot find Map' in browser #3855

[typescript] import { Map } from maplibre-gl gives error 'cannot find Map' in browser #3855

roossienb commented Mar 18, 2024 •

edited

HarelM commented Mar 18, 2024

roossienb commented Mar 18, 2024

neodescis commented Mar 18, 2024 •

edited

roossienb commented Mar 18, 2024 •

edited

HarelM commented Mar 19, 2024 •

edited

HarelM commented Mar 19, 2024

This issue was moved to a discussion.

This issue was moved to a discussion.

[typescript] import { Map } from maplibre-gl gives error 'cannot find Map' in browser #3855

[typescript] import { Map } from maplibre-gl gives error 'cannot find Map' in browser #3855

Comments

roossienb commented Mar 18, 2024 • edited

HarelM commented Mar 18, 2024

roossienb commented Mar 18, 2024

neodescis commented Mar 18, 2024 • edited

roossienb commented Mar 18, 2024 • edited

HarelM commented Mar 19, 2024 • edited

HarelM commented Mar 19, 2024

This issue was moved to a discussion.

roossienb commented Mar 18, 2024 •

edited

neodescis commented Mar 18, 2024 •

edited

roossienb commented Mar 18, 2024 •

edited

HarelM commented Mar 19, 2024 •

edited