使用React.lazy导入React组件时遭遇TypeScript 'default'属性缺失错误

这个问题的核心原因是：你的BugReport文件夹下同时存在index.ts和index.tsx文件，当你用import('client/templates/BugReport')导入整个文件夹时，TypeScript的模块解析系统可能优先选择了index.ts（而非包含默认导出的index.tsx），而这个index.ts并没有导出BugReport组件作为默认值，导致React.lazy要求的{ default: ComponentType<any> }类型不匹配。

下面是几个可行的解决方案：

方案1：明确导入index.tsx文件 #

直接在React.lazy的导入路径里指定index.tsx，跳过文件夹的默认索引解析，确保拿到正确的带默认导出的文件：

const BugReport = lazy(() => import(/* webpackChunkName: "bug-report" */ 'client/templates/BugReport/index.tsx'));

方案2：修改index.ts文件，重新导出index.tsx的默认值 #

如果业务必须保留index.ts，可以在这个文件里把index.tsx的默认导出重新暴露出来，让模块解析时能找到default属性：
在BugReport/index.ts中添加：

export { default } from './index.tsx';

这样当你导入client/templates/BugReport时，会通过index.ts间接拿到index.tsx的默认导出，满足React.lazy的类型要求。

方案3：调整TypeScript的模块解析优先级 #

修改你的tsconfig.json，在compilerOptions里调整extensions数组的顺序，让.tsx排在.ts前面，确保解析文件夹索引时优先选择.tsx文件：

{
  "compilerOptions": {
    // 其他配置...
    "extensions": [".tsx", ".ts", ".js", ".json"]
  }
}

这个方案会全局影响TypeScript的模块解析行为，适合希望保持导入路径简洁的场景。

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