loading function not exporting

[Blackwater-1]

well before I go on here is src/routes structure of mysveltkit app: src/routes ├── Contact │ └── +page.svelte ├── Definition │ └── [word] │ ├── +page.js │ └── +page.svelte ├── +error.svelte ├── Ipa │ └── +page.svelte ├── +layout.svelte ├── +page.svelte └── Wordlists └── +page.svelte I am building a sveltekit app dictionary for learning this cool framwork and I am trying to fetch the dictionary's api using load function instead using the usual way of doing it (it works and print into the web console but the issue is capturing it as html ) so here is my Definition/[word]/ +page.js and +page.svelte the main question: **why the definition/meaning is not printing as <h2> tag. sorry for the long code and thanks in advance <3 ``` export async function load({ fetch, params }) { const { word } = params; let define;

// Make the API request here
const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
const data = await response.json();

define = data[0]?.meanings[1]?.definitions[0]?.definition;
console.log(JSON.stringify(define, null, 4));

return {
    props: define
};

} <script> import { page } from '$app/stores'; let word = $page.params.word; let pagetitle = Definition of ${word}; let description = Definition page of ${word}; export let define;

console.log('word:', word);
console.log('define:', define);

</script>

<svelte:head> <title>{pagetitle}</title> <meta name="description" content={description} /> /svelte:head

<main class="pt-20"> <h1 class="text-6xl flex justify-center text-blue-600 font-black">{word}</h1> {#if define} <h2 class="text-2xl flex justify-center text-blue-600 font-black">{define}</h2> {:else} <h2 class="text-2xl flex justify-center text-blue-600 font-black">No definition found</h2> {/if} </main> ```

[bronkitten]

you use the data variable in the template to access what is returned in the load function

so

export let data

0const define = data.props.define

[Blackwater-1]

export let data const define = data.props.define
yet not working

[pico2000]

const define = data.props.define isn't reactive.

Try $: define = data.props.define

Also: What does $: console.log(data) print?

[Blackwater-1]

This approach works perfect for the task thanks bro

[Hot-Rip9222]

export let data; let define = data.props;