我可以在延迟加载的 Svelte 组件中访问上下文吗？

Question

I have this simple Svelte component:

<script lang="ts">
    import { getContext } from "svelte";
    let value = getContext('test');
</script>

<div>
    <p>{value}</p>
</div>

It is lazily loaded inside another component like this (note, this component is compiled completely separately from the lazy component):

<script lang="ts">
    import { onMount, setContext } from "svelte";
    let lazyRow = null;
    onMount(async () => {
      try {
        lazyRow = import("http://localhost/wc/row.js");
      } catch (e) {
        console.error(e);
      }
  })
  setContext('test', 'This is my context value');
</script>

{#if lazyRow}
    {#await lazyRow then { default: Row }}
        <Row />
    {/await}
{:else}
<p>Loading</p>
{/if}

Unfortunately when the component gets loaded and rendered it bombs out with the following error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$$')

I would have expected my Row component simply to render the text 'This is my context value', but I get the aforementioned error instead.

I've been googling around for this for a few hours but haven't been able to figure it out. Is it simply not possible to use contexts in lazily loaded components?

Update

So I figured out the problem with help from the comments below. The problem is that when the app and components are compiled separately they both include their own version of the svelte internals, so that includes things like current_component , etc. I will have to tweak my build logic in order for the app and components to share the same svelte internals. I'm not sure yet how, but I'll figure it out.

Update 2

While it is technically possible to share Svelte internals between an app and an externally loaded lazy component, in the end that isn't going to scale. So, I have come to the conclusion that this particular route isn't viable for the time being.

Answer 1

The component would just render undefined if the context were not to be found.

The problem has to be the import/file itself; it probably does not export a valid/fully compiled component as default .

You usually also would not import from localhost via an absolute URL which just breaks when deployed. I would rather expect something like import('./Row.svelte') and the build system should take care of the rest (compiling, code splitting, bundling, etc.).

---

While this should work if the component is valid, there is a scenario in which the context would be missing: When the component is constructed via the client-side API.

In this case, the context has to be manually forwarded, eg like this:

import { onMount, setContext, getAllContexts } from "svelte";

setContext("test", "This is my context value");
const context = getAllContexts();

onMount(async () => {
    try {
        const Row = await import("./row.svelte").then(m => m.default);
        new Row({ target: document.body, context });
    } catch (e) {
        console.error(e);
    }
});