Using React.lazy with TypeScript

reactjs typescript

You should do export default class {...} from the ./screens/Products/list instead of export class ScreensProductList {...}.

Or, alternatively, you can do:

const ScreensProductList = lazy(() =>  import('./screens/Products/List')    .then(({ ScreensProductList }) => ({ default: ScreensProductList })),);

reactjs typescript

One option is to add default export in "./screens/Products/List" like that

export default ScreensProductList;

Second is to change import code to

const ScreensProductList = React.lazy(() =>  import("./screens/Products/List").then((module) => ({    default: module.ScreensProductList,  })));

Or if you don't mind using an external library you could do:

import { lazily } from 'react-lazily';const { ScreensProductList } = lazily(() => import('./screens/Products/List'));

reactjs typescript

Another way

const UsersList = () => (  ..JSX)export default UsersList as React.FC;

Or in old class components

class UsersList extends Component {  render(){  }}export default UsersList as React.ComponentType

and while importing using React.lazy

React.lazy( ()=> import("./UsersList") )

CodeHunter