Broken imports from maplibre-gl

[moose115]

I started a new project and decided to go with MapTiler SDK with MapLibre GL, only to find out that the bare minimum is broken. At first I thought it is Svelte's issue, but downgrading the SDK to 1.2.1 solved the issue (quite a coincidence to try the SDK just after v2 got released). The error I got:

import maplibregl, { addProtocol as addProtocol$1 } from 'maplibre-gl';
                     ^^^^^^^^^^^
SyntaxError: Named export 'addProtocol' not found. The requested module 'maplibre-gl' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'maplibre-gl';
const { addProtocol: addProtocol$1 } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async nodeImport (file:///C:/Users/musta/Desktop/Projects/maptilertest/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55109:17)
    at async ssrImport (file:///C:/Users/musta/Desktop/Projects/maptilertest/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55011:24)
    at async eval (C:/Users/musta/Desktop/Projects/maptilertest/src/routes/+page.svelte:4:31)
    at async instantiateModule (file:///C:/Users/musta/Desktop/Projects/maptilertest/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:9)

I don't think it is much more than just tidying imports. It is a bit late where I am right now, so I can't look into it in detail, but I'd gladly contribute the fix tomorrow.

Steps to reproduce:

1. npm create svelte@latest fresh-app
2. Init MapTiler as shown here in router/+page.svelte

[jonathanlurie]

Hello @moose115 , sorry for the inconvenience. I found an issue yesterday that may b related to the issue you are experiencing: try to modify your tsconfig with moduleResolution to "Bundler" (instead of "Node").

I am investigating why this issue even happens, as the TS config did not change and MapLibre's did not either. Let me know if that helps.

[moose115]

Thank you for your response @jonathanlurie! Already had the property set to "bundler".

Found the issue, it has to do with new caching (but like I thought, it's just imports that are causing it). In caching.ts one of functions imported form maplibre-gl is addProtocol. I don't know why exactly, but for some reason rollup wants to import that function in particular separately via named imports, and fails miserably because maplibre-gl is a CommonJS module.

Importing maplibre-gl as default import in caching.ts, and then accessing the function with maplibregl.addProtocol prevents the function to be imported separately. (Edit: I think that wouldn't be too neat, could even be a code smell)

That function can be imported from index.ts instead, where it is already imported and re-exported anyway. I'll submit the PR soon (#79).

[jonathanlurie]

Hey @moose115 , thanks again for your fix, it is now part of the v2.0.1 available on npm!

[kyoshino]

I’m also working on a SvelteKit project, and looks like the SDK v2.2.0 has reintroduced the issue 😕

[jonathanlurie]

Hello @kyoshino , last week I pushed v2.2.1 with a fairly different export strategy, could you try it and let me know? If it does not work for you, can you please open another issue with more details specific to your use case?

[wgro]

I am also experiencing this issue with a SvelteKit project and 2.2.0.

[kyoshino]

Tested this again. The issue was reintroduced with v2.2.1, not v2.2.0. I have filed https://github.com/maptiler/maptiler-sdk-js/issues/99.