能否在懒加载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
相关产品推荐
相关产品推荐

