Preload function not loaded in Nav component

Question

It seems my preload function does not run (my pages variable is not fed as props of the Nav component). In _layout.svelte:

<script>
    import Nav from "../components/Nav.svelte";
</script>
<Nav />
<main>
    <slot />
</main>

In Nav.svelte:

<script context="module">
    export async function preload(page) {
        const res = await this.fetch(
            "http://localhost:2368/ghost/api/v3/content/settings/?key=xxx"
        );
        const data = await res.json();
        return {
            pages: data.settings.navigation,
        };
    }
</script>
<script>
    export let pages;
    import { stores } from "@sapper/app";
    const { page } = stores();
</script>

<nav>
    <ul>
        {#each pages as p}
            <li>
                <a
                    class={p.url.includes(page.path) ? 'selected' : ''}
                    href={p.url}>{p.label}</a>
            </li>
        {/each}
    </ul>
</nav>

The each loop rises TypeError: Cannot read property 'length' of undefined The wierd part is that if I do the preload in _layout.svelte and explicitely pass the return value as a props with <Nav {pages} /> then the code works... Any clue?

Answer 1

This is expected. Preload functions only run in page and layout components, not the components that they import.