Cannot read properties of undefined (reading 'map') when using context with a nested Promise object

[sirkostya009]

I'm trying to use context to bypass using load functions for some specific data to avoid sending a very large response on initial, server-rendered response.

I saw in docs that I can set reactive objects to context, so I have tried to dynamically importing a module into a $derived object, setting it to context, and in subsequent components consume said context with the new experimental await feature.

$derived because in my actual case I load data based on the path param. I expect it to work same as with $state.

But I am getting undefined whenever I call the getter function!

Here's the repro of the issue:

https://github.com/sirkostya009/svelte-context-repro (navigate to /a/nested)

I am not even sure if this is a bug or not. I have initially tried to just await import in the setContext call

setContext(key, await import(`$lib/${params.key}.js`));

but kept getting a "can only call setContext during component initialization" error so came up with a clever workaround that also doesn't work!

[tt-a1i]

The issue is that setContext must be called synchronously during component initialization, and the context value itself needs to be available at that moment.

When you use $derived with a dynamic import, the Promise resolves after initialization, so the consuming component tries to read undefined.

Workaround 1: Store the Promise itself

<!-- Parent -->
<script>
  const dataPromise = $derived(import(`$lib/${params.key}.js`));
  setContext(key, { get data() { return dataPromise; } });
</script>

<!-- Child -->
<script>
  const ctx = getContext(key);
</script>
{#await ctx.data}
  Loading...
{:then module}
  {module.default}
{/await}

Workaround 2: Use a reactive store

<script>
  import { writable } from "svelte/store";
  
  const data = writable(null);
  setContext(key, data);
  
  $effect(() => {
    import(`$lib/${params.key}.js`).then(m => data.set(m));
  });
</script>

Workaround 3: Pass a getter function

<script>
  let moduleData = $state(null);
  setContext(key, { get value() { return moduleData; } });
  
  $effect(() => {
    import(`$lib/${params.key}.js`).then(m => moduleData = m);
  });
</script>

The key insight is that context is set once during init, but you can pass a reactive reference (store, getter, or Promise) that updates later.