fix(Geocoder): Throws error in custom element context

components/src/maplibre/Geocoder/Geocoder.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import maplibre from 'maplibre-gl';
-	import MaplibreGeocoder, { type CarmenGeojsonFeature, type MaplibreGeocoderApi } from '@maplibre/maplibre-gl-geocoder';
+	import MaplibreGeocoder, {
+		type CarmenGeojsonFeature,
+		type MaplibreGeocoderApi
+	} from '@maplibre/maplibre-gl-geocoder';
 	import { MaptilerGeocoderAPI } from './GeocoderAPIs';
 
 	import type { Attachment } from 'svelte/attachments';
@@ -14,8 +17,8 @@
 		types = [],
 		placeholder,
 		limit = 3,
-		size = "default",
-		map,
+		size = 'default',
+		map
 	}: GeocoderProps = $props();
 
 	const countriesArr = $derived(Array.isArray(countries) ? countries : [countries]);
@@ -25,37 +28,38 @@
 	// Future: initialise a different GeocoderAPI depending on "service"
 	let geocoderAPI: MaplibreGeocoderApi = $derived(new MaptilerGeocoderAPI(key));
 
-	const geocoder = new MaplibreGeocoder(geocoderAPI, {
-		maplibregl: maplibre,
-		language: languagesArr.join(','),
-		countries: countriesArr.join(','),
-		types: typesArr.join(','),
-		showResultsWhileTyping: true,
-		showResultMarkers: false,
-		debounceSearch: 25,
-		placeholder,
-		limit
-	});
-
-	const handleResult = (r: {result: CarmenGeojsonFeature}) => {
-	    const res = r.result
-	    if(res.bbox && map){
-					map.fitBounds([
-              [res.bbox[0], res.bbox[1]],
-              [res.bbox[2], res.bbox[3]],
-            ])
-				}
+	const geocoder = $derived(
+		new MaplibreGeocoder(geocoderAPI, {
+			maplibregl: maplibre,
+			language: languagesArr.join(','),
+			countries: countriesArr.join(','),
+			types: typesArr.join(','),
+			showResultsWhileTyping: true,
+			showResultMarkers: false,
+			debounceSearch: 25,
+			placeholder,
+			limit
+		})
+	);
 
-	}
+	const handleResult = (r: { result: CarmenGeojsonFeature }) => {
+		const res = r.result;
+		if (res.bbox && map) {
+			map.fitBounds([
+				[res.bbox[0], res.bbox[1]],
+				[res.bbox[2], res.bbox[3]]
+			]);
+		}
+	};
 
 	const attachGeocoder: Attachment = (el) => {
-			geocoder.addTo(el as HTMLElement);
-			geocoder.on("result", handleResult)
-	}
+		geocoder.addTo(el as HTMLElement);
+		geocoder.on('result', handleResult);
+	};
 </script>
 
-<div class={["container", size]} {@attach attachGeocoder}></div>
+<div class={['container', size]} {@attach attachGeocoder}></div>
 
 <style lang="scss">
-  @use "geocoder.scss"
+	@use 'geocoder.scss';
 </style>

mock-sveltekit/src/routes/+page.svelte

@@ -3,9 +3,10 @@
 	import DesignTokens from '../../../components/src/DesignTokens/DesignTokens.svelte';
 
 	const charts = [
-		{ title: '348 Repro', slug: '348-repro' },
+		{ title: '#348 Repro', slug: '348-repro' },
 		{ title: 'Encapsulation Test', slug: 'encapsulation-test' },
-		{ title: 'Hero Scrolly', slug: 'hero-scrolly' }
+		{ title: 'Hero Scrolly', slug: 'hero-scrolly' },
+		{ title: '#450 Geocoder Repro', slug: '450-repro' }
 	];
 </script>
 

mock-sveltekit/src/routes/450-repro/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import Component from './Component.svelte';
+	import DevContainer from '$lib/components/DevContainer.svelte';
+</script>
+
+<p139-geocoder-test></p139-geocoder-test>

mock-sveltekit/src/routes/450-repro/Component.svelte

@@ -0,0 +1,67 @@
+<svelte:options customElement={{tag: "p139-geocoder-test", shadow: "none"}} />
+<!-- Doesn't work: <svelte:options customElement={{tag: "p139-geocoder-test"}} /> -->
+
+<script lang="ts">
+	import { VectorTileSource, Map, VectorLayer, Geocoder, DesignTokens } from '../../../../components/src';
+	let mapContext = $state();
+	let status = $state();
+
+	$effect(() => {
+		if (mapContext) {
+			mapContext.map.on('load', () => {
+				status = 'loaded';
+			});
+		}
+	});
+</script>
+
+<DesignTokens>
+  <div class="geocoder">
+  {#if mapContext?.map}
+				<Geocoder
+					map={mapContext.map}
+					service="maptiler"
+					key="oO1aTsULS3sqGPgn0qKN"
+					size="small"
+					countries={['de']}
+					placeholder={`z.b. „Sindelfingen“`}
+					types={['region', 'county', 'municipality']}
+					languages={['de']}
+				/>
+	{/if}
+  </div>
+  <div class="map">
+	<Map bind:mapContext>
+		<VectorTileSource
+			id="admin_boundaries"
+			promoteId="ars"
+			tiles={[
+				'https://static.datenhub.net/data/boundaries/admin_boundaries_2025-01-01.versatiles?{z}/{x}/{y}'
+			]}
+			maxZoom={8}
+		>
+			<VectorLayer
+				type="line"
+				sourceLayer="administrative"
+				sourceId="admin_boundaries"
+				id="boundaries-outline"
+				filter={['==', 'admin_level', 6]}
+				paint={{ 'line-color': 'red', 'line-width': 0.5 }}
+			/>
+		</VectorTileSource>
+	</Map>
+	<p class="status">{status}</p>
+  </div>
+</DesignTokens>
+
+<style>
+  .container {
+
+		padding: 5%;
+  }
+ 	.map {
+		aspect-ratio: 4 / 3;
+		margin-bottom: 1em;
+  }
+
+</style>