watergis/svelte-maplibre-components

[bug]: Svelte Maplibre Measure broken import prevents build

Closed this issue · 2 comments

a0a7 commented

Bug Description

I can't build my project with this Maplibre measure plugin. Not using svelte-maplibre-measure fixes it. Here is the error:

file:///C:/GitRepos/StravaMultiMapper/.svelte-kit/output/server/entries/pages/_page.svelte.js:6
import maplibregl, { Marker } from "maplibre-gl";
                     ^^^^^^
SyntaxError: Named export 'Marker' 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 { Marker } = 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 Module.component (file:///C:/GitRepos/StravaMultiMapper/.svelte-kit/output/server/nodes/2.js:5:59)
    at async Promise.all (index 1)
    at async render_response (file:///C:/GitRepos/StravaMultiMapper/.svelte-kit/output/server/index.js:1824:21)
    at async render_page (file:///C:/GitRepos/StravaMultiMapper/.svelte-kit/output/server/index.js:2664:12)
    at async resolve2 (file:///C:/GitRepos/StravaMultiMapper/.svelte-kit/output/server/index.js:3581:24)
    at async respond (file:///C:/GitRepos/StravaMultiMapper/.svelte-kit/output/server/index.js:3467:22)
    at async visit (file:///C:/GitRepos/StravaMultiMapper/node_modules/.pnpm/@sveltejs+kit@1.30.4_svelte@4.2.12_vite@4.5.2/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:203:20)      

Bug Reproduction

Use svelte-maplibre-measure

Expected behaviour

Successful build

Bug Screenshots

No response

Bug System Information

System:
OS: Windows 11 10.0.22631
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Memory: 1015.71 MB / 15.68 GB
Binaries:
Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.11.0 - ~\AppData\Local\pnpm\pnpm.EXE
Browsers:
Edge: Chromium (122.0.2365.80)
Internet Explorer: 11.0.22621.1
npmPackages:
@sveltejs/adapter-auto: ^2.1.1 => 2.1.1
@sveltejs/adapter-cloudflare: ^4.1.0 => 4.1.0
@sveltejs/adapter-static: ^2.0.3 => 2.0.3
@sveltejs/kit: ^1.30.4 => 1.30.4
@sveltejs/vite-plugin-svelte: ^3.0.2 => 3.0.2
svelte: ^4.2.12 => 4.2.12
vite: ^4.5.2 => 4.5.2

@sudolev There is a problem of using maplibre since aveltekit v2 in SSR

you can add maplibre-gl to ssr.noExternal in vite.config.ts or add +page.ts to disable ssr

a0a7 commented

I see. I added maplibre to ssr.noExternal and the plugin works well in prod now. Thanks for helping me out!