Unable to import module in SvelteKit app

[a0a7]

I'm trying to use this in a SvelteKit app with TypeScript, but i'm not able to get it to work.

There are two approaches I've tried for importing this. Firstly, at the top of my script block using import MeasuresControl from 'maplibre-gl-measures';. Doing this yields the following error message

SyntaxError: Cannot use import statement outside a module

C:\...\maplibre-gl-measures\src\maplibre-gl-measures.js:1
import MapboxDraw from "@mapbox/mapbox-gl-draw";
^^^^^^

The second approach only imports the library on the client, like so:

let MeasuresControl: any;
onMount(async () => {
    const measuresModule = await import('maplibre-gl-measures');
    MeasuresControl = measuresModule.default;
}

But doing this results in a separate error in the browser console,

Uncaught (in promise) ReferenceError: global is not defined
   support Lodash
    __require chunk-2GTGKKMZ.js:12
    _basecreatecallback Lodash
    __require chunk-2GTGKKMZ.js:12
    foreach Lodash
    __require chunk-2GTGKKMZ.js:12
    units maplibre-gl-measures.js:9515
    __require chunk-2GTGKKMZ.js:12
    <anonymous> maplibre-gl-measures.js:4

I'm basically just wondering how I should go about using this in Svelte. It seems like an invaluable plugin to have, and any help is much appreciated.

[jdsantos]

Hi @syslev!

Well, that is odd. I only use Vue.js and never tried Svelte, but can you attach a demo project using Svelte and maplibre-gl-measures so that I can have a look?

Thanks!

[birkskyum]

Issues with solid-start too. mapbox-gl-draw works alright

[jdsantos]

Hi guys,

Just answered to issue #21 that I think it could be related to this issue. Here is the demo project I created using typescript:

hello-world.zip

Let me know if this helps you in any way.

Cheers,

Jorge