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

Posted 2023-02-21

【中文标题】未捕获的 TypeError：init 不是 mountLazyComponent 的函数

【英文标题】：Uncaught TypeError: init is not a function at mountLazyComponent

【发布时间】：2021-05-26 04:00:46

【问题描述】：

我正在尝试向我的 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>;
;```

【参考方案1】：

Lazy Modules 必须在底部导入。

例如：

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;

【讨论】：

我把它切换到底部，仍然有同样的错误