5

I'm trying to adopt react-lazy in my source. But I don't know what is wrong..

I Checked Two Things.

  1. Check export way of homeContainer Component. It's default export So It doesn't effect about using lazy component(export default HomeContainer)
  2. I did console of Home Component.. It's $$typeof: Symbol(react.lazy), _init, payload...I don't know is right.. is it alright?

When I excute my app I got Three Errors... but I can't find what is wrong...

  1. uncaught undefined readLazyComponentType
  2. (index):22 Uncaught TypeError: Cannot read property 'includes' of undefined at index.22
  3. The above error occurred in one of your React components: in Unknown (created by Context.Consumer)

In App.tsx which is I declared Route based component. My module version is react: 16.9.16, react-dom: 16.9.4


import React, {lazy, Suspense} from "react";
import {BrowserRouter,  Switch,  Route} from "react-router-dom";

const Home = lazy(() => import("./routes/Home/HomeContainer"));
console.log(Home)

.....

return (
<BaseLayout>
<Suspense fallback={<SpinContainer />}/>
 <Switch>
  <Route exact path={PATH.ROOT} component={Home}/>
   ... Other Routes ...
 </Switch>
</Suspense>
</BaseLayout>

...
...
)

const App: React.FC = () => {
  return (
    <ErrorBoundary>
      <BrowserRouter>
        <RoutedComponent />
      </BrowserRouter>
    </ErrorBoundary>
  );
};

export default App;

young ban
  • 169
  • 1
  • 12

0 Answers0