reactjs - 未捕获的 TypeError：init 不是 mountLazyComponent 的函数

Question

我正在尝试为我的 reactjs 应用程序添加一个悬念，但出现此错误。不太确定我做错了什么。它看起来像我以前使用过的 Suspense，但这次它出错了。我不确定它是否与 index.js 文件有关，但如果需要回答问题，我会很乐意发布

const Projects = lazy(() => import('./pages/Projects/Projects'));
import Loader from "./components/UI/Loader/Loader";


const App = ({ loggedIn, emailVerified }) => {
  let routes;
  if (loggedIn && !emailVerified) {
    routes = (
      <Layout>

        <Switch>
          <Route exact path="/verify-email" component={VerifyEmail} />
          <Route path="/logout" component={Logout} />
          <Redirect to="/verify-email" />
        </Switch>
   
      </Layout>
    );
  } else if (loggedIn && emailVerified) {
    routes = (
      <Layout>
        <Switch>
        <Suspense fallback={<Loader />}>
          <Route exact path="/" component={Projects} />
          <Route exact path ="/verify-email" 
          render={() =>
            emailVerified ? <Redirect to="/" /> : <Profile />
          }
          />
          <Route path="/profile" component={Profile} />
          <Route path="/logout" component={Logout} />
          <Route path="/:id" component={TodosLayout} />
        
          <Redirect to="/" />
          </Suspense>
        </Switch>
 
      </Layout>
    );
  } else {
    routes = (
      <Switch>
        Other routes I removed for length
      </Switch>
    );
  }
  return <Fragment>{routes}</Fragment>;
};```

Answer 1

必须在底部导入惰性模块。

例如：

import { useState, useEffect } from "react";

// import anything else here like: 
import Loader from "./components/UI/Loader/Loader";

// import lazy modules at the very bottom
const Projects = lazy(() => import('./pages/Projects/Projects'));

const App = () => {
  return <h3>App Is Working</h3>
}

export default App;