Vite动态导入报错求助：替代CRA的require写法

问题背景 #

在CRA项目中原本通过require导入组件：

const Components = {};

Components[0] = require('./ContentBuilderTemplate0').default;
Components[1] = require('./ContentBuilderTemplate1').default;

迁移到Vite后，因Vite不支持require语法，改用动态import却触发报错：

The above dynamic import cannot be analyzed by Vite.
See ... for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

尝试的动态导入代码：

const Components = {};
const componentIndices = [ 0, 1, 2, 3, '3-secondary', 4, ...];

const asyncImportComponents = async() => {
   for (const index of componentIndices) {
     const importPath = index === '3-secondary'
       ? `./ContentBuilderTemplate3Secondary.tsx`
       : `./ContentBuilderTemplate${index}.tsx`;
     const componentModule = await import(importPath);
     Components[index] = componentModule.default;
   }
};

asyncImportComponents();

当前Vite配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

export default defineConfig({
  server: {
    port: 3000,
    proxy: {
      '/media': {
        target: 'http://websites.dataart.com/',
        changeOrigin: true,
      },
    }
  },
  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
  envDir: './envs',
});

解决方法 #

方法1：静态导入映射（推荐） #

Vite要求动态导入路径需在构建时可被分析，因此可以先静态导入所有组件，再映射到对应索引，完全符合构建规则：

import Template0 from './ContentBuilderTemplate0.tsx';
import Template1 from './ContentBuilderTemplate1.tsx';
import Template2 from './ContentBuilderTemplate2.tsx';
import Template3 from './ContentBuilderTemplate3.tsx';
import Template3Secondary from './ContentBuilderTemplate3Secondary.tsx';
import Template4 from './ContentBuilderTemplate4.tsx';
// 按需添加更多组件

const Components = {
  0: Template0,
  1: Template1,
  2: Template2,
  3: Template3,
  '3-secondary': Template3Secondary,
  4: Template4,
  // 对应componentIndices补充映射关系
};

方法2：import.meta.glob批量导入 #

利用Vite内置的import.meta.glob实现批量导入，无需手动逐个引入：

// 匹配所有ContentBuilderTemplate开头的tsx文件，eager设为true表示同步导入
const componentModules = import.meta.glob('./ContentBuilderTemplate*.tsx', { eager: true });

const Components = {};

// 遍历模块，将文件名转换为对应索引key
for (const path in componentModules) {
  const fileName = path.split('/').pop().replace('.tsx', '');
  let key;
  
  if (fileName === 'ContentBuilderTemplate3Secondary') {
    key = '3-secondary';
  } else {
    key = fileName.replace('ContentBuilderTemplate', '');
  }
  
  Components[key] = componentModules[path].default;
}

如果需要懒加载组件，可移除eager: true参数，改为异步处理逻辑。

方法3：添加@vite-ignore忽略警告（不推荐） #

若必须保留原动态导入逻辑，可在import调用中添加注释忽略警告，但会导致构建时无法预打包该组件，可能影响性能：

const componentModule = await import(/* @vite-ignore */ importPath);

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