如何在React TypeScript项目中正确实现React.lazy动态导入？

API 探路者

2026-7-27

React TypeScript项目动态导入懒加载报错：TypeError: Failed to resolve module specifier

我用Create React App搭建了React TypeScript项目，想通过动态导入实现组件懒加载优化性能，但运行时遇到错误：

TypeError: Failed to resolve module specifier

以下是我的代码和配置：

App.tsx

import { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const MyComponent = lazy(() => import('./MyComponent'));

const App: FC = () => {
    return (
        <Router>
            <Suspense fallback={<div>Loading...</div>}>
                <Switch>
                    <Route path="/mycomponent" component={MyComponent} />
                    {/* other routes */}
                </Switch>
            </Suspense>
        </Router>
     );
  };

export default App;

MyComponent.tsx

const MyComponent: FC = () => {
  return <div>Hello, I'm MyComponent!</div>;
};

export default MyComponent;

package.json（相关依赖）

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0"
  },
  "devDependencies": {
    "typescript": "^4.4.4"
  }
}

tsconfig.json（相关配置）

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "."
  },
  "include": ["src"]
}

试过几种网上的方案都没解决，求正确实现动态导入懒加载的方法。

解决方案

检查文件路径大小写
Create React App在Windows系统下对路径大小写不敏感，但部署到Linux或部分构建环境时会严格校验。确保import('./MyComponent')的路径和实际文件名（比如MyComponent.tsx）大小写完全一致，避免出现./mycomponent这类错误写法。
确认组件导出方式匹配
若后续修改组件使用了命名导出，需调整动态导入语句适配：
```
const MyComponent = lazy(() => import('./MyComponent').then(module => ({ default: module.MyComponent })));
```
当前代码用的是默认导出，这部分没问题，但要避免混合两种导出方式导致解析失败。
升级依赖版本
React 17搭配react-router-dom 5.3.0理论上支持懒加载，但可能存在版本兼容隐患。尝试升级到稳定版本：
```
npm install react@^18.2.0 react-dom@^18.2.0 react-router-dom@^6.14.0 typescript@^5.0.0
```
注意：升级到react-router-dom v6后，路由写法需调整——Switch替换为Routes，Route的component属性换成element：
```
<Routes>
  <Route path="/mycomponent" element={<MyComponent />} />
</Routes>
```
验证tsconfig配置
确保tsconfig.json中module设为esnext/es2020、moduleResolution设为node，这两个配置是动态导入正常工作的核心。当前配置符合要求，若使用TypeScript 5+，可添加"allowImportingTsExtensions": false避免导入时错误添加.tsx后缀。
清除缓存重新构建
缓存异常可能导致构建解析错误，执行以下命令清除缓存：
```
npm start -- --reset-cache
# 或手动删除缓存目录
rm -rf node_modules/.cache
```

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