Unexpected slot in <Page> when using route groups

[finn753]

Describe the bug

Sometimes when using layout groups and layouts within them, the app shows the page for a short amount of time and then shows the root page (but keeping the same url). But after renaming the layout group to a normal path and then reverting it to a layout group it works again. So maybe it's an issue with caching

Reproduction

Create a sveltekit project with this example structure: . └── src/ ├── +page.svelte ├── +layout.svelte └── (auth)/ ├── +layout.svelte └── login/ ├── +layout.svelte └── +page.svelte

Fill all the layouts with example content and the slot and the pages also with some example layout

And then sometimes when trying to access a page within the layout group, it reverts to the root page. I really don't know how to replicate it, it seems to happen randomly and then you have to change the group to a normal route and back for it to work again

Logs

No response

System Info

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M1
    Memory: 123.02 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.5.0 - ~/.nvm/versions/node/v21.5.0/bin/node
    npm: 10.4.0 - ~/.nvm/versions/node/v21.5.0/bin/npm
    Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 123.0.6312.58
    Safari: 17.3.1
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.1.1 
    @sveltejs/kit: ^2.0.0 => 2.5.4 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.2 
    svelte: ^4.2.7 => 4.2.12 
    vite: ^5.0.3 => 5.2.2

Severity

annoyance

Additional Information

No response

[gtm-nayan]

@finn753 can you please submit the reproduction in the form of a public git repository, just a description of the files makes it harder to replicate, especially if it's inconsistent.

[dualjack]

I have the same issue. I was sure it was my fault, but after many attempts, it seems route groups breaks hydration.

For a second page shows correct +page.svelte then loads some random results.

Edit:

Yes I can 100% confirm. After renaming grouped route to normal route, everything works fine. It is really difficult to replicate. Some results are totally random. I close my IDE, open it again, run vite dev and different route layout displays sqished front-page inside the sub page.

[paator]

Hello, I experience the same issue, just as described by @dualjack.

[Codewealth]

Same here... Experiencing a weird issue where the wrong page loads. It's really really hard to replicate and happens randomly. I'll have portal/alerts but it will load the page of portal/profile (while the url does remain portal/alerts) Only fixes itself when I do a npm run dev. I'm really hoping this is some cache issue in DEV mode only...

[gwest7]

I've managed to isolate it to the global in a transition:slide|global attribute. Perhaps @finn753 you can have a look at your usage of this? I was not able to replicate the issue in a skeleton app so the global transition must be in combination with more logic.

[dualjack]

Just to add more to this topic, I've managed to discover that optional route params also causes this error. This bug breaks the main routing functionality.

For example, if you have this kind of directory structure:

-- routes -- -- [parentX] -- -- -- [[optionalParamY]] -- -- -- -- -- A -- -- -- -- -- B <--- when going here -- -- -- -- -- C <-- it loads this page -- -- -- -- -- D <-- or sometimes this page ( it's totally random )

[Codewealth]

Just to add more to this topic, I've managed to discover that optional route params also causes this error. This bug breaks the main routing functionality.

For example, if you have this kind of directory structure:

-- routes -- -- [parentX] -- -- -- [[optionalParamY]] -- -- -- -- -- A -- -- -- -- -- B <--- when going here -- -- -- -- -- C <-- it loads this page -- -- -- -- -- D <-- or sometimes this page ( it's totally random )

Have you experienced this in production? Sounds like a cache issue.

[MitchMigala]

This is so annoying. I have a simple routing structure. If you are not logged in you go to the base route login page. There is a base route layout that adds some scripts, and I also do my head modifications in here. Once you login you go to the /dashboard which has a layout that renders headers and footers depending on screen size. It literally WONT render the dashboard content. I log in and it moves me to /dashboard flashes the correct content for a second then (staying at the correct url) displays the login page again. I gave up trying to fix this and just dumped all my second layout into the root layout and wrapped it all in checks to prevent it from rendering on the home route. This has been the first time since learning about Svelte and SvelteKit I am having this kind of issue and it is super disappointing. I wasn't even trying to do something complicated. Sad day for me for real.

[gwest7]

@gtm-nayan I manage to reproduce my issue in a skeleton app. https://github.com/gwest7/sveltekit-issue-12026-demo

[gwest7]

@gtm-nayan are you able to get the reported behaviour from the demo above?

[gtm-nayan]

@gwest7 Your repro seems like it's for a different issue, perhaps https://github.com/sveltejs/kit/issues/7405 ? I was looking for something that recreates the Unexpected slot in <Page> warning

[elliott-with-the-longest-name-on-github]

This issue has been dead for a while. If you can still reproduce this issue, please:

• npx sv create my-repro
• git init && git add --all && git commit -m "Initial commit"
• Add the code that minimally illustrates your issue
• git add --all && git commit -m "Reproduce issue"
• Create a repository on GutHub and upload your code
• Open a new issue with the reproduction