使用Create React App时react-loadable跨文件夹懒加载组件失败

嘿，我之前在Create React App里做路由懒加载时也踩过类似的坑，跨文件夹导入组件找不到的问题大概率是这几个原因导致的，咱们一个个来排查解决：

1. 先确认路径和文件名的准确性 #

这是最容易忽略的点：

• 检查相对路径是否正确：比如你的路由文件在src/routes/MainRouter.js，要导入src/containers/HomeAContainer.js，路径应该是../containers/HomeAContainer（因为../会回到src目录，再进入containers文件夹）。如果是用绝对路径（比如src/containers/...），Create React App默认不支持直接用src开头的绝对路径，除非你配置了webpack的别名。
• 大小写完全匹配：Linux和macOS系统对文件名大小写敏感，比如文件实际是HomeAContainer.js，但你写成homeAContainer就会找不到，Windows系统可能不报错，但部署到服务器后就会出问题。
• 不要漏掉文件后缀（可选）：虽然Create React App默认支持省略.js/.jsx后缀，但如果是.tsx或者其他扩展名，最好加上后缀试试。

2. 检查组件的导出方式 #

懒加载的import()默认导入的是默认导出的模块：

• 如果你的组件是默认导出：

  // HomeAContainer.js
  const HomeAContainer = () => { /* ... */ }
  export default HomeAContainer;
  

  那懒加载的写法是正常的。
• 如果是命名导出：

  // HomeAContainer.js
  export const HomeAContainer = () => { /* ... */ }
  

  你需要调整懒加载的写法，手动指定导出的组件：

  const HomeAContainer = lazy(() => 
    import("../containers/HomeAContainer").then(module => ({ default: module.HomeAContainer }))
  );
  

3. 确认路由懒加载的正确写法 #

注意：不要把组件懒加载写到路由的loader属性里！loader是React Router用来预加载数据的，不是加载组件的。正确的组件懒加载应该配合React的lazy和Suspense：

// 路由文件里的正确写法
import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

// 懒加载组件
const HomeAContainer = lazy(() => import("../containers/HomeAContainer"));

function MainRouter() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/home" element={<HomeAContainer />} />
        {/* 其他路由 */}
      </Routes>
    </Suspense>
  );
}

export default MainRouter;

如果你用的是createBrowserRouter的对象式配置，写法如下：

const router = createBrowserRouter([
  {
    path: "/home",
    element: (
      <Suspense fallback={<div>加载中...</div>}>
        <HomeAContainer />
      </Suspense>
    ),
  },
]);

4. 清除缓存，重启开发服务 #

Create React App的开发服务器有时候会缓存旧的模块解析结果，导致路径修改后不生效：

• 关闭当前的开发服务器，运行npm start --reset-cache（或者yarn start --reset-cache）重启服务
• 也可以手动删除node_modules/.cache文件夹，再重启服务
• 尝试用浏览器的无痕模式打开页面，避免浏览器缓存的影响

5. 检查自定义webpack配置（如果有） #

如果你已经eject了Create React App，或者用了craco/customize-cra修改过webpack配置，要检查resolve部分的配置：

• 确保resolve.extensions包含了你使用的文件扩展名（比如.js, .jsx, .tsx）
• 检查是否有错误的resolve.alias配置，导致路径解析出错

按照上面的步骤排查下来，应该就能解决跨文件夹懒加载组件找不到的问题啦！

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