Nested layout shows empty page when navigating

[Tupiet]

I'm using Inertia.js for a project. I'm using Laravel/Inertia.js for the backend and Svelte (v4.0.0) for the frontend.

TL;DR: When using a nested layout, I'm unable to see the content of the page if I don't acess it via a reload or writting the URL in the searchbar.

The app has a default layout, called Layout.svelte, that is rendered automatically in all pages (except the login page) via the app.js file (as said in the docs). That layout includes the navigation between the pages (a navbar and some a tags, with use:inertia). This works fine.

The problem is when I have a nested layout. This happens in the settings page (/settings). That page includes a nested layout, and the reason is because I need to edit different settings. I have different routes (sub-routes), one for each setting. So, from any page in settings, I have a navigation bar that allows me to change the page of the setting I'm editing. Let me explain this better.

I have a list of States and Priorities. For simplicity, each Svelte component has the base layout (the navbar of all the app), the settings layout (the navbar of settings) and a text, saying in which page I'm.

• If I go to /settings, I render Settings/Index.
• If I go to /settings/states, I render Settings/States
• If I go to /settings/priorities, I render Settings/Priorities

Then, if I write localhost/settings in the searchbar of the browser, I see both layouts, the text from Settings/Index, and I'm able to navigate between the pages in the nested layout (pressing states sends me to localhost/settings/states, and I see both layouts and the text from Settings/States). The problem is when I'm not in the settings page (for example, I'm in the home page of the app) and I press the link from the base layout that sends me to the settings page. I see both layouts, but I don't see the content of the page. I don't see the text that should be shown. If then I try to move to a different page from settings (I press the states link, for example), the same happens, I just see both layouts, but the rest of the page is empty. I have to reload (F5) the page in order to see the content.

This is the app.js file, where the base layout is used by default

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

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
    let page = pages[`./Pages/${name}.svelte`]
    return { default: page.default, layout: page.layout || (name.startsWith('Login/') ? undefined : Layout) }
  },
  setup({ el, App, props }) {
    new App({ target: el, props })
  }
})

This is the SettingsLayout.svelte

<script>
    import MainTitle from "../../Shared/MainTitle.svelte";
    import route from "ziggy-js";
    import { inertia } from "@inertiajs/svelte";
</script>
<MainTitle>Settings</MainTitle>

<nav>
    <a use:inertia href={route('settings.index_states')}>States</a>
    <a use:inertia href={route('settings.index_priorities')}>Priorities</a>
</nav>

<slot></slot>

Finally, this is Settings/Priorities.svelte (it's the same as Settings/Index or Settings/States, just changing the text in the p)

<script context="module">
    import Layout from "../../Shared/Layout.svelte";
    import LayoutSettings from "./LayoutSettings.svelte";

    export const layout = [Layout, LayoutSettings]
</script>

<p>Priorities</p>

I don't know if I'm doing anything wrong, but I can't find any way to solve this. Thanks for reading this, and hope anyone has a solution, because I'm stucked in this, and I don't know if I'm doing anything wrong, or if it's a bug. Also, if you need more information, feel free to ask me. Thanks for this amazing project!

[Tupiet]

I thought I had Svelte 4.0.0 but instead I had Svelte 4.2.x. As mentioned in #1621, downgrading to Svelte 4.0.0 fixed my issue.