You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否在懒加载Svelte组件中访问Context?问题分析与结论

Svelte懒加载独立编译组件无法使用上下文报错问题

我有如下简单的Svelte组件:

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

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

该组件被另一个组件以懒加载方式引入(注意:此组件与懒加载组件完全分开编译):

<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}

不幸的是,组件加载渲染时抛出如下错误:

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

原本预期Row组件能直接渲染文本“This is my context value”,但实际出现上述错误。已搜索数小时仍未解决,难道懒加载组件无法使用上下文吗?

更新
在评论区帮助下找到了问题根源:当应用与组件分开编译时,二者各自包含独立的Svelte内部代码,比如current_component等。需要调整构建逻辑,让应用与组件共享同一套Svelte内部代码,目前尚未明确具体方法,但会继续解决。

更新2
尽管从技术上可以让应用与外部懒加载组件共享Svelte内部代码,但该方案不具备可扩展性。因此得出结论:当前该方案暂不可行。

内容的提问来源于stack exchange,提问作者Roland Zwaga

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.05 20:40:18