Issues with Svelte 4

[punyflash]

Version:

• @inertiajs/svelte version: 1.0.9
• svelte version: 4

Describe the problem:

When using Svelte 4, props are not being populated on inertia router visits. Also when adding svelte-eslint to the project pages are completely empty after visit.

Steps to reproduce:

Just make a visit using inertia link or router to the route that requires any props

[reinink]

Hey! I am not able to reproduce this issue. We actually have a Svelte playground included in the project, which is on Svelte 4.x, and I just tested it and it works fine:

https://github.com/inertiajs/inertia/tree/master/playgrounds/svelte

I am going to close this issue for now, but feel free to provide us with a minimal reproduction of the issue you're experiencing as a Git repo and we can have another look 👍

[punyflash]

@reinink here is an example repository: https://github.com/punyflash/inertia-test.

A bit detailed explanation

I created 2 pages: /page/1 and page/2 to show how it works. It seems like page is not being updated after persistent layout change

Page 1

<script lang="ts" context="module">
    // import LayoutInsideTag from "@/components/LayoutInsideTag.svelte";
    import LayoutOutsideTag from "@/components/LayoutOutsideTag.svelte";

    export const layout = [LayoutOutsideTag];
</script>

<script lang="ts">
    import { fade } from 'svelte/transition';
    import { inertia } from "@inertiajs/svelte";
    export let title = '';
    export let data = '';
</script>

<svelte:head>
    <title>{title}</title>
</svelte:head>

<section in:fade>
    <h1 class="text-3xl">{title}</h1>
    <div>{data}</div>
    <a href="/page/2" class="underline" use:inertia>Go to page 2</a>
</section>

Page 2

<script lang="ts" context="module">
    // import LayoutOutsideTag from "@/components/LayoutOutsideTag.svelte";
    import LayoutInsideTag from "@/components/LayoutInsideTag.svelte";

    export const layout = [LayoutInsideTag];
</script>

<script lang="ts">
    import { fade } from 'svelte/transition';
    import { inertia } from "@inertiajs/svelte";
    export let title = '';
    export let data = '';
</script>

<svelte:head>
    <title>{title}</title>
</svelte:head>

<section in:fade>
    <h1 class="text-3xl">{title}</h1>
    <div>{data}</div>
    <a href="/page/1" class="underline" use:inertia>Go to page 1</a>
</section>

Expected behavior (Svelte 3)

Actual (Svelte 4)

[reinink]

@punyflash Thanks for sharing!

[bbauti]

Hey! any updates on this?

[pedroborges]

Hey @punyflash, thanks for reporting this bug. At my company we were upgrading to Svelte 4 and ran into the same issue with persistent layouts. My coworker found your issue and confirmed it using the Svelte playground.

I was able to identify that this issue started happening in Svelte v4.1.1. The solution for now is to force Svelte v4.1.0.

I won't have time to work on a fix in the next two weeks. When I get a chance I will try to determine if this is a bug on our side or Svelte's.

On our side it could be related to the key part of this each block 🤷‍♂️

cc/ @bbauti

[rkyoku]

Hi there,

A nice fellow on Discord sent me here, kudos to him/her!

I can confirm the bug with both versions 4.1.1 and 4.1.0 of Svelte, although the behavior is different.

On version 4.1.1 the main <slot/> never gets updated after a redirect (login/logout), although the layout is updated (and so are the props used in the layout, e.g. my <h1> tag). I have to refresh (F5) the page for the main slot to be updated again.

On version 4.1.0 it works better, but still fails if I do the login from a page other than /, in which case the props are not passed to the template, and I get errors like "#each should only be used on iterables" things like that.

Downgrading to Svelte 4.0.0 works properly for me! I'll stick to version 4.0.0 until things are fixed on either side.

Good luck with this bug, and thanks for this great tool!

Best,

[Josefikos]

svelte v5 won't work too

[delordemm1]

svelte v5 won't work too

Damn, i thought it was from my end, battled this for hours 🥲

[punyflash]

As it seems the package is dead and most of crucial PRs are hanging for almost a year (#1614, #1763, #1635), I created my own adapter for Svelte with typescript support and some issues fixed regarding styles and props loading. You are free to use it: https://github.com/westacks/inertia-svelte. You can natively replace the inertia adapter, and it will work as it is.

[vitalijalbu]

Cool, what makes the maintainer of this library not update it anymore? At least can the public make pr?

[harryqt]

You are free to use it: https://github.com/westacks/inertia-svelte. You can natively replace the inertia adapter, and it will work as it is.

@punyflash How do I install it?

[punyflash]

@punyflash How do I install it?

npm i @westacks/inertia-svelte

[punyflash]

I am getting errors (not using TS).

Update package to 1.0.20, it should work now even if you don't use typescript

[harryqt]

Thank you, it works now. 👍

If you don't mind, can you take a look at issue #1785

[joshstobbs]

@Dibbyo456 I put in a PR over at the westacks repo that solves the unknown prop issue. Still trying to sort through the unexpected slot part but I'm not too sure where that's coming from, will keep this updated if I can figure it out.

[harryqt]

@joshstobbs thanks for the PR. FYI, when using Svelte 5 the warning do not appear.

[joshstobbs]

Oh that’s really cool @Dibbyo456! I haven’t actually been able to get Inertia to work with Svelte 5, any chance you have an example repo?

[harryqt]

Just follow this guide, unfortunately SSR is broken #1801 😕

[driesvints]

Seems a PR was sent in for this: #1763. Let's see how it goes. Thanks all.

[reinink]

Hey folks! Just merged in #1763 — let's hope this is all resolved now. Will try and get a release out shortly 👍

[reinink]

This fix has been released as part of v1.0.16 👍

[nairboon]

Just follow this guide, unfortunately SSR is broken #1801 😕

This guide from @danmatthews seems to have moved to this url: https://danmatthews.me/posts/you-can-use-svelte-v5-with-inertiajs-really-easily-today-bf9de