Svelte组件动态导入异常：含扩展名变量触发TypeError

这是因为前端打包工具（从你代码里的$myGlobalComponentFolder别名来看，大概率是Vite）的静态模块分析机制导致的差异：

1. 第一种写法（扩展名固定在模板字符串中）：

   const componentName = "MyComponent";
   let importedComponent = (await import(`$myGlobalComponentFolder/myComponent/${componentName}.svelte`)).default;
   

   打包工具能通过静态分析识别出：你要导入的是$myGlobalComponentFolder/myComponent/目录下所有.svelte后缀的文件。它会提前把这些目录下的Svelte组件纳入打包范围，同时完成别名解析、Svelte组件编译等流程，所以运行时能成功找到模块。

2. 第二种写法（扩展名包含在变量中）：

   const componentName = "MyComponent.svelte";
   let importedComponent = (await import(`$myGlobalComponentFolder/myComponent/${componentName}`)).default;
   

   此时模板字符串里的路径是$myGlobalComponentFolder/myComponent/${componentName}，变量componentName的内容在打包阶段无法被静态确定。打包工具不知道这个变量对应的文件后缀是什么，也无法预判需要打包哪些文件，因此不会把MyComponent.svelte纳入打包产物，运行时自然找不到对应的模块，抛出Failed to resolve module specifier错误。

本质上，打包工具需要明确的文件后缀来识别模块类型和打包范围，把后缀藏在变量里会直接破坏这种静态分析能力。

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