how to setup on sveltekit?

[tibeemts]

could you guide me how to setup on sveltekit?

[0gust1]

TLDR:

• use onMount() to dynamically import your component containing your svelte-leaflet related code
• use {#if browser} to condition the rendering when in browser.

<script lang="ts">
	import { browser } from '$app/env';
	import { onMount } from 'svelte';

	let LeafletContainer;

	onMount(async () => {
		if (browser) {
			LeafletContainer = (await import('$lib/LeafletContainer.svelte')).default;
		}
	});
</script>

{#if browser}
<svelte:component this={LeafletContainer} />
{/if}

[timwis]

Instead of importing the library in onMount, I was able to get it working using vite-plugin-iso-import:

import { LeafletMap } from 'svelte-leafletjs?client'

[dritter]

@timwis was a bit sparingly with his informations.

After installing vite-plugin-iso-import, you need to do three things:

1. Configure vite in svelte.config.js to use it as plugin:

   import { isoImport } from 'vite-plugin-iso-import'
   
   const config = {
       kit: {
           vite: {
               plugins: [isoImport()]
           }
       }
   }

2. Configure it in tsconfig.json or jsconfig.json:

   {
       "compilerOptions": {
           "plugins": [{ "name": "vite-plugin-iso-import" }]
       }
   }

3. Use it with {#if browser} in your template and import svelte-leafletjs with ?client

   <div id="map" style="height: 80vh;">
   {#if browser}
       <LeafletMap options={mapOptions}>
           <TileLayer url={tileUrl} options={tileLayerOptions}/>
       </LeafletMap>
   {/if}
   </div>
   
   <script>
   import { browser } from '$app/env'
   import {LeafletMap, TileLayer} from 'svelte-leafletjs?client';
   import 'leaflet/dist/leaflet.css'
   
   const mapOptions = {
       center: [1.364917, 103.822872],
       zoom: 11,
   };
   const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
   const tileLayerOptions = {
       minZoom: 0,
       maxZoom: 20,
       maxNativeZoom: 19,
       attribution: "© OpenStreetMap contributors",
   };
   </script>

[beebase]

Would someone happen to know how to install with plain Svelte + vitejs?

[Erildo]

I'm getting a 500 window is not defined.....does anyone know how to solve this,cant make it run

[baisong]

@Erildo I'm also getting window not defined error, I think Leaflet 1.9.0 will resolve this in coming weeks:

• Leaflet/Leaflet: Expose ESM entrypoint with Leaflet global #8329

...And maybe the enhanced ESM support added will obviate the need to implement one or more (or all) of the other methods listed on this thread? i.e. onMount((async () => { if (browser) {})) / {#if browser}...{/if} / vite-plugin-iso-import, etc.

[nickboucart]

I have a serverless (sst) project, using svelte for the frontend. It uses vite to deal with the frontend stuff. (see https://sst.dev/examples/how-to-create-a-svelte-app-with-serverless.html for the general setup, as a side note - I really liked the experience so far)

I tried the mimic the approach as proposed by @dritter in the comment above, but to no avail. When I try to import leaflet, it complains about having no default import, when I add the ?client, I get

Failed to resolve import "svelte-leafletjs?client"

Any ideas? (Sorry, I'm rather new to vite/svelte)

Thanks!

[fhennig]

I've got this to run, I noticed that this line:

import { browser } from '$app/env';

should be

import { browser } from '$app/environment';

Other than that you need to install https://github.com/bluwy/vite-plugin-iso-import if the ?client import isn't working for you.

[deekshithmr95]

thanks @dritter , this saved my day,