I use layout.server.js
to perform url checks and load other data. This data is loaded by +page.svelte
. Now I want to load current url in +layout.svelte
for page transition, but the data loaded (let { data } = $props();
) in +layout.svelte
is empty while it is correctly loaded in +page.svelte
.
//(app)/+layout.server.js
export async function load({ url }) {
//...some code
return { myData, url: url.pathname };
}
//(app)/+page.svelte
let { data } = $props(); // returns the correct data
//src/+layout.svelte
<script>
let { children, data } = $props(); // undefined
</script>
{#key data.url}
<main in:fade={{ duration: 300, delay: 300 }} out:fade={{ duration: 300 }}>
{@render children?.()}
</main>
{/key}
What am I missing ?
Thx,
Is the +layout.svelte safely in the same folder as the +layout.server.js and the +page.svelte? That would be the first thing that comes to mind, because I once had a case where I didn't see that because the file manager in the code editor had such extremely small indentations. If they are, have you tried building the application (npm run build) and running it in the production version (npm run preview)? Otherwise, I would also try deleting the .svelte-kit folder and deleting and reinstalling node_modules.