使用React Lazy时出现Cannot read properties of undefined报错求助

错误原因 #

问题出在React.lazy的回调函数上：lazy要求传入的回调必须返回一个动态import()生成的Promise，但你写的()=>{import("./pages/aboutus")}用了大括号却没写return，导致函数默认返回undefined，自然找不到Promise的then方法，触发报错。

修复代码 #

只需要把回调里的大括号去掉（箭头函数无大括号时会自动返回表达式结果），或者显式添加return：

import React, { Suspense, lazy } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Loader from "./components/loader";
// 修复方式1：去掉大括号，自动返回import结果
const AboutLazy = lazy(() => import("./pages/aboutus"));
// 修复方式2：显式return
// const AboutLazy = lazy(() => { return import("./pages/aboutus") });

function App() {
  return (
    <BrowserRouter>
      <HomeContext.Provider value={{ homes }}>
        <Suspense fallback={<Loader />}>
          <Routes>
            <Route path="/aboutus" element={<AboutLazy />} />
          </Routes>
        </Suspense>
      </HomeContext.Provider>
    </BrowserRouter>
  );
}

export default App;

额外注意事项 #

1. 确保./pages/aboutus文件里默认导出了React组件，如果是命名导出，需要调整懒加载写法：

const AboutLazy = lazy(() => 
  import("./pages/aboutus").then(module => ({ default: module.AboutUs }))
);

2. 原代码里的</ Suspense >有多余空格，要改成</Suspense>；多余的</>也要删掉，保证JSX结构闭合正确。

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