Persistent Layouts don't render with Inertia/Svelte

Versions:

• @inertiajs/inertia version: 0.10.1
• @inertiajs/inertia-svelte version: 0.7.4

Describe the problem:

Following the example from the documentation at https://inertiajs.com/pages I set up my Svelte component to use a persistent layout.

<style>
  h1 { font-size: var(--size-12); }
</style>

<h1>{greeting}</h1>
<p>I'm an example home page.</p>

<script>
  import { inertia, Link } from '@inertiajs/inertia-svelte';
  import DefaultLayout from '@/layouts/default.svelte';

  export const layout = DefaultLayout;
  export let greeting;
</script>

The default layout looks like this:

<nav>Insert Navigation here</nav>
<main>
  <slot></slot>
</main>

The layout does not render.

However if I change this to a “non-persistent layout” it works exactly as expected.

<DefaultLayout>
  <h1>{greeting}</h1>
  <p>I'm an example home page.</p>
</DefaultLayout>

<script>
  import { inertia, Link } from '@inertiajs/inertia-svelte';
  import DefaultLayout from '@/layouts/default.svelte';

  // export const layout = DefaultLayout;
  export let greeting;
</script>

I’m not getting any errors, but I do see the following warnings in the console:

Specifically the message <Home> received an unexpected slot "default". seems related, but note that this warning appears whether with both versions (persistent and non-persistent), and googling it turns up this issue which indicates this may not be a real error.

Also since the code works exactly correctly using the “non-persistent” version, I’m inclined to think that something in the inertia plumbing isn’t hooked up right.

For reference, I also tried doing this by setting it up as a default layout in the main function:

import '@/styles/application.css'
import { createInertiaApp } from '@inertiajs/inertia-svelte'
import DefaultLayout from '@/layouts/default.svelte';

createInertiaApp({
  resolve: name => {
    const page = import(`./pages/${name}.svelte`);
    page.layout = page.layout || DefaultLayout;
    return page;
  },
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
})

This had no effect, the result was exactly the same as using export layout from the home page component.

Steps to reproduce:

Described in detail above.

[burlesona]

Hi @pedroborges, thanks for the help, that fixed it. Sorry for what turned out to be a mistake reading the docs.

For future reference in case anyone else lands here by googling, setting the default layout in my main function didn’t work because I’m bundling with Vite, and thus using import() instead of require(). Import is async, so I needed to add async/await to get it to work.

[andregoldstein]

Helped a lot by this article https://dev.to/buhrmi/setting-up-a-new-rails-7-app-with-vite-inertia-and-svelte-c9e