Currently, I am in the process of developing a Webapp using Laravel Inertia and Svelte.
I encountered an error when trying to use a Persistent Layout and navigating to another page using a <Link> element. The error message displayed was:
Uncaught (in promise) Error: {#each} only iterates over array-like objects when using Layouts<Link> element, as directly accessing /login or / does not trigger the error.
Below is the portion of code that seems to be causing this problem:
Welcome.svelte
<script context="module">
export { default as layout } from "../Layouts/GuestLayout.svelte";
</script>
<script>
import { Link, page } from "@inertiajs/svelte";
import Card from "@/Components/Card.svelte";
</script>
<div class="min-h-screen">
{#each $page.props.products as product}
<Card productImages={product.images} productName={product['name']} productDescription={product['description']} primaryButtonText={"Buy @" + product['product_store']}></Card>
{/each}
</div>
GuestLayout.svelte
<script>
import { Link , page} from "@inertiajs/svelte";
import Navbar from "@/Components/Navbar.svelte";
export let canLogin, canRegister;
</script>
<div
class="min-h-screen flex flex-col"
>
<Navbar canLogin={canLogin} canRegister={canRegister} user={$page.props.auth.user}></Navbar>
<slot />
</div>
Snippet of Navbar.svelte
{#if canLogin}
<div class="p-6 text-right">
{#if $page.props.auth.user}
{#if canLogin}
<Link href={route("login")}>
<button class="hover:text-white">Login</button>
</Link>
{/if}
{/if}
</div>
{/if}
If I remove the #each section in Welcome.svelte or eliminate the Layout usage, the issues are resolved. Any guidance or suggestions on where I may be going wrong would be highly appreciated.