svelte:component 无内容显示，动态导入组件问题求助

问题现象 #

尝试实现动态模板切换功能，通过onMount异步导入对应组件并赋值给Home变量，再用<svelte:component>渲染。控制台显示组件已加载，但页面上#printable容器始终为空；静态导入组件并直接赋值时功能正常。

核心问题分析 #

1. Switch分支缺少break，导致组件被意外覆盖
   原代码中case '1'分支未添加break语句，会引发逻辑错误：

   • 当doc.templateId = '1'时，会先加载Artist组件，但随后会继续执行后续default分支，重新加载Expert组件并覆盖Home变量；
   • 即使是其他templateId值，缺少break的写法也存在潜在逻辑风险。

2. 动态导入写法存在优先级歧义
   原代码await (import(...)).default的写法虽能运行，但更规范的写法是(await import('路径')).default，明确先等待模块加载完成，再取默认导出。

修正后的代码 #

<script>
    import { onMount } from 'svelte';
    let Home;
    
    onMount(async () => {
        console.log('loading home ', doc.templateId);
        switch (doc.templateId) {
            case '1':
                Home = (await import('$lib/template/_artist/Home.svelte')).default;
                break; // 终止当前分支，避免执行后续代码
            case '2':
            case '3':
            default:
                Home = (await import('$lib/template/_expert/Home.svelte')).default;
                break;
        }
        console.log('home loaded ', doc.templateId);
        // 可选：验证组件是否正确加载
        console.log('Loaded component:', Home);
    });
</script>

<div class='flex flex-col xl:flex-row'>
    <ResumeButtons {data} />

    <div class='flex flex-grow flex-row-reverse mt-4'>
        <!-- 用于平衡按钮面板的布局占位 -->
    </div>

    <div id='printable' class='flex-none'>
        <svelte:component this={Home} doc={doc} on:modified={documentModified}/>
    </div>
</div>

额外调试建议 #

• 验证组件加载结果：在赋值Home后添加console.log，确认变量是否指向有效的组件构造函数；
• 检查组件内部逻辑：在动态导入的组件中添加初始化日志（比如onMount内的打印），确认组件是否真正被实例化；
• 确认props传递：检查doc变量在组件渲染时是否有正确的值，避免组件因缺失必要props而不渲染内容。

内容的提问来源于stack exchange，提问作者Zied Hamdi