Svelte isn´t hydrating page. [HMR][Svelte] Unrecoverable HMR error in

I´m using svelte and pocketbase for my website. and if I go to a page then nothing is rendered but when i refresh then suddenly it works.

[HMR][Svelte] Unrecoverable HMR error in < page>: next update will trigger a full reload

I can´t find any docs on this and i can´t find any other asked questions either

My page.svelte file.

<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
    
    src={`https://avatars.dicebear.com/api/identicon/${product.expand?.user?.username}.svg`}
    alt="avatar"
    width="40px"
/>
{#each product as x}
    <img
        
        src={x.url}
        alt="avatar"
        width="40px"
    />
{/each}

Page.Ts file

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)
    }
}

CodePudding user response：

Make load function async. And then await fetchProduct function call.

In current state product is Promise.

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)
    }
}

Plus, for reactivity:

<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
    
    src={`https://avatars.dicebear.com/api/identicon/${product.expand?.user?.username}.svg`}
    alt="avatar"
    width="40px"
/>

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