I'm trying to adopt react-lazy in my source. But I don't know what is wrong..
I Checked Two Things.
- Check export way of homeContainer Component. It's default export So It doesn't effect about using lazy component(export default HomeContainer)
- 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...
- uncaught undefined readLazyComponentType
- (index):22 Uncaught TypeError: Cannot read property 'includes' of undefined at index.22
- 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;