Svelte/SvelteKit：动态导入带变量的组件答案

【问题标题】：Svelte/SvelteKit: Dynamic import of components with variableSvelte/SvelteKit：动态导入带变量的组件
【发布时间】：2021-11-16 14:02:00
【问题描述】：

我想动态导入组件而不导入特定组件。我想用从商店收到的变量设置组件名称：

<script lang="ts">
    // SVELTE
    import { onMount } from 'svelte';

    // STORE
    import { dynamicComponent } from '$stores/dynamicTitle';


    $: $dynamicComponent;
    console.log($dynamicComponent)

    
    let renderDynamicComponent
    

    onMount(async () => {       
        const importValue = (await import(`../../lib/components/Home/DynamicComponents/${String($dynamicComponent)}.svelte`)).default;
        // const importValue = (await import(`../../lib/components/Home/DynamicComponents/IntroSectionCustom.svelte`)).default;
        renderDynamicComponent = importValue
    });

<svelte:component this={renderDynamicComponent}/>

但我明白了：

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3000/src/lib/components/Home/DynamicComponents/Intro-Section-Custom.svelte

我不明白。从错误来看，似乎是对的路……

【问题讨论】：

标签： import svelte dynamic-import sveltekit

【解决方案1】：

我认为 Svelte + 捆绑器目前不支持动态生成的路径：

let thing = 'Thing';
Thing = (await import(`./${thing}.svelte`)).default; // this won't work
Thing = (await import(`./Thing.svelte`)).default; // this will work

捆绑器的限制。
github问题：https://github.com/sveltejs/svelte/issues/6702

【讨论】：