DEV Community

Jim Nayzium
Jim Nayzium

Posted on

Confused on +layout.js and +layout.svelte props passed in load() function...

I have a load function in my root +layout.js file that is:

export async function load() {
// and all it returns is
return {
prop1: true,
prop2: false,
prop3: "value 3"
};

For the life of me, I cannot do anything in the +layout.svelte file to make these values show up.

export let prop1;
export let prop2;
export let prop3;
console.log("prop1 = " + prop1);

gives me "prop1 undefined" in the console every time!
I have tried deconstructing the export like

let { prop1 } = data;
// and
let { prop1 } = props;

and nothing works... no matter what I do!

Is it because the load function is async? I need it to be async so I can fetch some external api's when it's done, but I was just testing the bare bones to try and understand how things worked.

Any ideas on the load order of

+page.js vs +layout.js
+page.svelte vs +layout.svelte

etc?

Top comments (2)

Collapse
 
jimnayzium profile image
Jim Nayzium • Edited

I am a moron!!
I never defined data!!


export let data;
export let { prop1, prop2, prop3 } = data;

I was assuming

export let { prop1, prop2, prop3 } = data;

also defined and exported data!!!
Carry on with your lives...

Collapse
 
w3rafu profile image
Rafael Fu

Hello!
FYI, you don't need to define data.

You can find it by importing {page} from '$app/stores'.

Then you can use your props as {$page.data.prop1} or {$page.data.prop2}...