data object not rendering in svelte component

Question

I'm trying to set up one of my d3 projects. I am importing the data into App.svelte, then passing it to the <Draw/> component. Inside Draw.svelte I have export let data = [] but when I try to use data, it is undefined & an empty array. What am I doing wrong? Here's the App.svelte code. The console.log() does show the data object I'm looking for.

<script lang="ts">
   import Draw from "./Components/Draw.svelte"
   import { data } from './data';
   console.log(data);
</script>

<main>
   <h1>Hello </h1>
   {#await data}
       <p>Loading...</p>
   {:then data} 
       <Draw
         data={data}
       />
   {/await}
</main>

Answer 1

Your code is missing the closing {/await} . Also, it's confusing to call the variable in {:then data} data which is the same name as the promise data . So you're better off calling that different and then use <Draw data={myDifferentName}/>

Summed up, I'd rewrite your code as follows:

<script lang="ts">
   import Draw from "./Components/Draw.svelte"
   import { data } from './data';
   console.log(data);
</script>

<main>
   <h1>Hello </h1>
   {#await data}
      <p>Loading...</p>
   {:then dataValue} 
      <Draw data={dataValue}/>
   {/await}
</main>

Answer 2

Your code looks correct. I guess you'll have a promise to get the data array, otherwise there is no much sense to use await . You haven't shown the Draw component, it's likely the problem is there. Try this to debug the data and make sure it's defined when the promise is resolved, before passing it to the Draw :

<script lang="ts">
   import Draw from "./Components/Draw.svelte"
   import { data } from './data'
   console.log(data)
</script>

<main>
   <h1>Hello </h1>
   {#await data}
       <p>Loading...</p>
   {:then data}
       { console.log(data) }
       <Draw { data }/>
   {/await}
</main>