title: SvelteKit - load() not called from component but works as a Page
body: <p>If the file test.svelte below is a Page in /routes, it successfully calls load() and populates the template with the JSON array it retrieves when I access it via http://localhost:3000/test. If I move this file to /lib and import it as a component in /routes/index.svelte, the load() method of the component never runs when I go to http://localhost:3000.</p>
  <p><strong>test.svelte</strong></p>
  <pre><code>&lt;script context=&quot;module&quot; lang=&quot;ts&quot;&gt;
    /**
       * @type {import('@sveltejs/kit').Load}
     */
    export async function load({ fetch }) {
      const url = '/api/announcement'
      const res: Response = await fetch(url)
  
      if (res.ok) {
        const sections: Announcement[] = await res.json()
        return {
          props: {
            sections
          }
        }
      }
  
      return {
        status: res.status,
        error: new Error(`Could not load ${url}`)
       }
    }
  &lt;/script&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
    export let sections: Announcement[] = []
  &lt;/script&gt;
  
  &lt;template&gt;
    {#each sections as section}
      &lt;p&gt;
        {section.title}&lt;br/&gt;
        {section.description}
      &lt;/p&gt;
    {/each}
  &lt;/template&gt;
  </code></pre>
  <p>Here is routes/index.svelte that tries to load it as a component from /lib:</p>
  <pre><code>&lt;script context=&quot;module&quot; lang=&quot;ts&quot;&gt;
    import Test from '$lib/test.svelte'
  &lt;/script&gt;
  
  &lt;template lang=&quot;pug&quot;&gt;
    .container
      Test
  &lt;/template&gt;
  </code></pre>
  <p>Seems like I'm doing something obviously wrong but I'm new to Svelte and SvelteKit. While I considered retrieving the data in routes/index.svelte and pass it down to the component, I was hoping to encapsulate the data retrieval in the component to keep it simpler.</p>