1

I am trying to add a suspense to my reactjs app and I got this error. Not really sure what I am doing wrong. It looks like previous Suspense that I have used but this time it is erroring. I'm not sure if it has to do with the index.js file but I will happily post that if it is needed to answer the question

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>;
};```
Jacqueline
  • 21
  • 7

1 Answers1

0

Lazy Modules must be imported at the bottom.

For Examle:

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;
Astrit Spanca
  • 643
  • 5
  • 13