'Fetch error when refreshing page with await block in SvelteKit

I am building a sveltekit app that crashes when I refresh the page. Below is the code for the Home page that displays a map with points. The points are fetched from an api (also running on localhost). I initially had the await call inside an onMount function (worked fine) but I thought it would be tidier to use an await block. When the app is running everything works great - I can navigate to and from the Home page and the map loads as expected. However, if I refresh the browser on the Home page or navigate directly to the Home page after starting the app it crashes.

Update: I now realize that using an await block or sveltkit's load function will run the fetch function on the server side before the page loads. This appears to fail because the map component relies on window. Disabling SSR fixes the issue although I would expect that the data object could be fetched via a load function and this not interfere with component creation, i.e. SSR shouldn't need to be disabled.

Svelte page:

<script>
    const API_PATH = import.meta.env.VITE_API_PATH;
    import Map from '$lib/Leaflet/Map.svelte';
    import Point from '$lib/Leaflet/Vector/Point.svelte';

    const lat = -41.273;
    const lng = 173.279;
    const zoom = 15;

    async function getSites() {
        const res = await fetch(API_PATH + '/sites');
        const sites = await res.json();

        if (res.ok) {
            return sites;
        } else {
            throw new Error(sites);
        }
    }

    let promise = getSites();

</script>

<svelte:head>
    <title>Home</title>
</svelte:head>

<main>
    <Map center={[lat, lng]} {zoom}>
        {#await promise then sites}
            {#each Object.values(sites['features']) as site}
                <Point lat={site['geometry']['coordinates'][1]} lng={site['geometry']['coordinates'][0]}>
                </Point>
            {/each}
        {/await}
    </Map>
</main>

I get the following error in terminal:

Got request /
file:///.../node_modules/@sveltejs/kit/dist/install-fetch.js:6246
                        reject(new FetchError(`request to ${request.url} failed, reason: ${error.message}`, 'system', error));
                               ^

FetchError: request to http://localhost:8000/sites failed, reason: connect ECONNREFUSED ::1:8000
    at ClientRequest.<anonymous> (file:///.../node_modules/@sveltejs/kit/dist/install-fetch.js:6246:11)
    at ClientRequest.emit (node:events:520:28)
    at Socket.socketErrorListener (node:_http_client:442:9)
    at Socket.emit (node:events:520:28)
    at emitErrorNT (node:internal/streams/destroy:164:8)
    at emitErrorCloseNT (node:internal/streams/destroy:129:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  type: 'system',
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED',
  erroredSysCall: 'connect'
}

And in the browser console:

Loading failed for the module with source “http://localhost:3000/@fs/.../.svelte-kit/runtime/client/start.js”.

Thanks for the support.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source