Having trouble with the persistent/default Layout Example from Inertia Website

[Ironcheese]

I am trying to use the persistent layouts with the latest versions of Svelte and Inertiajs.

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "dependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@inertiajs/inertia": "^0.10.1",
        "@inertiajs/inertia-svelte": "^0.7.4",
        "@inertiajs/progress": "^0.2.6",
        "autoprefixer": "^10.3.2",
        "axios": "^0.21",
        "daisyui": "^1.13.2",
        "laravel-mix": "^6.0.28",
        "postcss": "^8.3.6",
        "postcss-import": "^14.0.2",
        "postcss-nesting": "^8.0.1",
        "resolve-url-loader": "^4.0.0",
        "svelte": "^3.42.3",
        "svelte-loader": "^3.1.2",
        "tailwindcss": "^2.2.7"
    }
}

Without the persistent layouts everything (besides some annoying dev warnings) works as expected.
As soon as I add the persistent layouts to my app.js resolve function, only the layout will be rendered.
My Welcome Page/Component is completly ignored.

app.js

import { createInertiaApp } from '@inertiajs/inertia-svelte';
import Layout from './Shared/Layout.svelte';

createInertiaApp({
    // Using the example from here: https://inertiajs.com/pages#persistent-layouts
    resolve: name => {
        const page = require(`./Pages/${name}`).default;
        page.layout = page.layout || Layout;
        return page;
    },
    setup({ el, App, props }) {
        new App({ target: el, props })
    },
})

Shared/Layout.svelte

<script>
    import { inertia } from '@inertiajs/inertia-svelte'
</script>

<main>
    <header>
        <a use:inertia href="/">Home</a>
        <a use:inertia href="/about">About</a>
        <a use:inertia href="/contact">Contact</a>
    </header>
    <article>
        <slot>This is a test</slot>
    </article>
</main>

Pages/Welcome.svelte

<script context="module">
import Layout from '../Shared/Layout.svelte'
export const layout = Layout
</script>

<script>
export let user
</script>

<h1>Welcome</h1>
<p>Hello {user.name}, welcome to your first Inertia app!</p>
<button class="btn mt-5">Daisy-UI Button</button>

I am new to svelte, so I really do not know what I am doing wrong ¯\_(ツ)_/¯
I looked at the pingcrm-svelte project, but this does not use default/persistent layouts (as far as I can tell) and the svelte/inertia versions are older.

I have created a test repo for reproduction and testing.
Please see the commit messages for more info.

[reinink]

Hey there, I don't have any time today to look at this, but I recommend looking at our Svelte implementation of the Ping CRM demo app: https://github.com/inertiajs/pingcrm-svelte. Maybe it will give you some hints of what's going wrong. 👍

[Ironcheese]

Hey Jonathan,

no rush. I did look at the pingcrm svelte project. (by the way, thank you for that - its a treasure trove of knowledge!)
The code there does not use the default nor persistent layout and it looks like the versions used for inertia and svelte are not the newest.

[eric-hansen]

I was having issues trying to figure out how to get this to work in Svelte as well, but after seeing what the pingcrm-svelte repo is doing, it made sense. So for anyone else who Googles and finds this issue -

1. In your Layout.svelte make sure it has a <slot /> where you want the page to load in to (https://github.com/inertiajs/pingcrm-svelte/blob/b9674b4c779468f3c475f872dd37b35588e89a79/resources/js/Shared/Layout.svelte#L74)
2. In the page you're wanting to load into that layout, create a <script context="module"></script> block if you don't have it already, and then add your import for the layout in there and do export const layout = Layout; (https://github.com/inertiajs/pingcrm-svelte/blob/b9674b4c779468f3c475f872dd37b35588e89a79/resources/js/Pages/Users/Index.svelte#L1-L4)

The reason for this is that per the Svelte docs, context="module" will only read the contents within the block once, on initial render (https://svelte.dev/docs/svelte-components#script-context-module). So effectively the layout won't continuously be re-rendered when going to another page.

But if you're doing something like <Layout>....</Layout> in another file then it will re-render, which if for example you were doing this to keep audio playing it would reset that state.

Another way to do this would be in the createInertiaApp() call, when you're fetching the page, is to first assign the layout and return the page object:

import { createInertiaApp } from '@inertiajs/svelte'
import { SharedLayout } from './Shared/Layout.svelte';

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
    let page = pages['./Pages/${name}.svelte']
    page.layout = SharedLayout

    return page
  },
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
})