javascript - Svelte hydrateert de pagina niet. [HMR][Svelte] Onherstelbare HMR-fout in <+page>: de volgende update zal een volledige herlaad veroorzaken

Ik gebruik Svelte en Pocketbase voor mijn website. En als ik naar een pagina ga, wordt er niets weergegeven, maar wanneer ik ververs, werkt het plotseling.

[HMR][Svelte] Onherstelbare HMR-fout in <+page>: de volgende update zal een volledige herlaadbeurt veroorzaken

Ik kan hier geen documenten over vinden en ik kan ook geen andere gestelde vragen vinden

Mijn page.svelte-bestand.

<script lang="ts">
    export let data;
    const { product } = data;
</script>

<h1>{product.name}</h1>
<p>{product.price}</p>
<p>{product.desc}</p>
<p>{product.expand?.user?.username}</p>
<img
    class="avatar"
    src={`https://avatars.dicebear.com/api/identicon/${product.expand?.user?.username}.svg`}
    alt="avatar"
    width="40px"
/>
{#each product as x}
    <img
        class="avatar"
        src={x.url}
        alt="avatar"
        width="40px"
    />
{/each}

Page.Ts bestand

import { pb } from "$lib/pocketbase"

export const load = ({ params }: any) => {

    const fetchProduct = async (id: string) => {
        const product = await pb.collection('products').getOne(id, {
            expand: "user, image"
        },
        )
        console.log(product)
        return product
    }

    return {
        product: fetchProduct(params.productID)
    }
}

Antwoord #1

Maak de load-functie asynchroon. En wacht dan op de aanroep van de fetchProduct-functie.

In de huidige staat is het product een Belofte.

import { pb } from "$lib/pocketbase"

export const load = async ({ params }: any) => {

    const fetchProduct = async (id: string) => {
        const product = await pb.collection('products').getOne(id, {
            expand: "user, image"
        },
        )
        console.log(product)
        return product
    }

    return {
        product: await fetchProduct(params.productID)
    }
}

Bovendien, voor reactiviteit:

<script lang="ts">
    export let data;
    $: ({ product } = data);
</script>

<h1>{product.name}</h1>
<p>{product.price}</p>
<p>{product.desc}</p>
<p>{product.expand?.user?.username}</p>
<img
    class="avatar"
    src={`https://avatars.dicebear.com/api/identicon/${product.expand?.user?.username}.svg`}
    alt="avatar"
    width="40px"
/>

    <img
        class="avatar"
        src={product.url}
        alt="avatar"
        width="40px"
    />