React动态导入模块报错：Cannot find module问题求助

动态导入import()的路径需要满足编译时静态可分析的要求，这是Webpack、Vite等前端打包工具的核心限制：

1. 直接写字符串字面量能运行的原因
   当你使用import('../Clock.tsx')时，打包工具在编译阶段就能明确识别这个固定路径，提前把Clock.tsx打包进产物，运行时自然能正确找到模块。

2. 用模板字符串包裹变量报错的原因
   你代码里的path是完全动态的变量，打包工具在编译时无法预知它的具体值，没办法提前定位和打包对应的模块，所以运行时会抛出“找不到模块”的错误。

3. 你提到的示例能运行的逻辑
   那个示例里的动态导入必然带有静态前缀（比如import(./components/${name}.jsx)），这种情况下打包工具会识别固定的前缀路径，把该目录下所有符合匹配模式的模块都提前打包，运行时就能根据变量找到对应的模块。

修复方案 #

• 保留静态前缀的动态导入：把路径里固定的部分写死，仅动态替换可变部分，比如：

useEffect(() => {
  const loadComponent = async () => {
    // 仅动态替换文件名部分，前缀是静态的
    const componentModule = await import(`../${activeTab}.tsx`);
    setComponent(componentModule.default);
  };
  loadComponent();
}, [activeTab]);

• 使用路径映射表：提前维护组件名称与静态路径的映射，避免完全动态的路径：

const componentPathMap = {
  clock: '../Clock.tsx',
  // 其他组件的路径配置
};

useEffect(() => {
  const loadComponent = async () => {
    const path = componentPathMap[activeTab];
    if (path) {
      const componentModule = await import(path);
      setComponent(componentModule.default);
    }
  };
  loadComponent();
}, [activeTab]);

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