Using React.lazy with TypeScript

Question

I am trying to use React.lazy for code splitting in my TypeScript React app.

All I am doing is changing that line:

import {ScreensProductList} from \         


        

Answer 1

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'));