Svelte не увлажняет страницу. [HMR][Svelte] Неисправимая ошибка HMR в <+page>: следующее обновление вызовет полную перезагрузку

Question

Я использую svelte и pocketbase для своего сайта. и если я перехожу на страницу, то ничего не отображается, но когда я обновляюсь, она внезапно работает.

[HMR][Svelte] Неисправимая ошибка HMR в <+page>: следующее обновление вызовет полную перезагрузку

Я не могу найти никаких документов по этому вопросу, и я не могу найти другие заданные вопросы.

Мой файл page.svelte.

Файл Page.Ts

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

Answer 1

Сделайте функцию загрузки асинхронной. А затем дождитесь вызова функции fetchProduct.

В текущем состоянии продукт 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)
    }
}

Плюс, для реактивности:

      <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"
    />