Persistent Layouts don't render with Inertia/Svelte

[burlesona]

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.

[pedroborges]

The code related to persisted layout should go in Svelte's context module script block, not the main script block.

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

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

<script context="module">
  import DefaultLayout from '@/layouts/default.svelte';
  export const layout = DefaultLayout;
</script>

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

  export let greeting;
</script>

[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.

[aliwesome]

@burlesona Thank you for this, I try to add async/await and I faced another issue that said TypeError: Cannot add property layout, object is not extensible I do not know exactly what should I do here.

[andregoldstein]

@burlesona Thanks for this, I seem to be able to get the layout picked up by default using async/await import syntax but my slot is always empty, would you be able to share your entry point by any chance? Thanks!

[andregoldstein]

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

[WalterWoshid]

should go in Svelte's context module script block, not the main script block

Oh my, reading is hard, even for me. Somehow I completely overlooked that...

Thanks for the help!