From b907bbdb84c080e4d165a7d284751c9527a45345 Mon Sep 17 00:00:00 2001 From: Yorick de Wid Date: Sat, 25 Jul 2026 11:03:53 +0000 Subject: [PATCH] Emit and register the maplibre worker as a build asset maplibre v6 loads its worker as a sibling module via a runtime-computed URL - invisible to the bundler, so the file was never emitted. At runtime the request for /assets/maplibre-gl-worker.mjs fell through to the SPA catch-all (text/html), the module worker died and the map stayed blank. This never showed in CI or unauthenticated probes because the map only mounts behind login (and on the 404 page). ?worker&url bundles the worker with its imports and returns the hashed URL, registered via setWorkerUrl(). Worker output names get the same per-build suffix as the main bundle. Co-Authored-By: Claude Fable 5 --- src/components/Common/Mapbox/MapBox.vue | 10 +++++++++- vite.config.ts | 9 +++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/Common/Mapbox/MapBox.vue b/src/components/Common/Mapbox/MapBox.vue index 25aba36..76dd88a 100644 --- a/src/components/Common/Mapbox/MapBox.vue +++ b/src/components/Common/Mapbox/MapBox.vue @@ -8,10 +8,18 @@ */ import { onMounted, onUnmounted, provide, readonly, ref } from 'vue' -import { Map as MaplibreMap } from 'maplibre-gl' +import { Map as MaplibreMap, setWorkerUrl } from 'maplibre-gl' +// maplibre v6 loads its worker as a sibling module via a runtime-computed +// URL, which the bundler can't see - the file never gets emitted and the +// request falls through to the SPA catch-all (text/html -> dead worker, +// blank map). ?worker&url makes Vite bundle the worker with its imports +// and hands us the hashed URL to register instead. +import maplibreWorkerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url' import 'maplibre-gl/dist/maplibre-gl.css'; +setWorkerUrl(maplibreWorkerUrl) + /** * The MapLibre instance */ diff --git a/vite.config.ts b/vite.config.ts index 069c313..bf831d4 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -23,6 +23,15 @@ export default defineConfig(() => { return { plugins: [tailwindcss(), vue(), svgLoader()], + worker: { + rollupOptions: { + output: { + entryFileNames: `assets/[name]-[hash]-${buildId}.js`, + chunkFileNames: `assets/[name]-[hash]-${buildId}.js`, + assetFileNames: `assets/[name]-[hash]-${buildId}[extname]`, + }, + }, + }, resolve: { alias: [ { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },