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 "./screens/Products/List";

to this line:

const ScreensProductList = lazy(() => import('./screens/Products/List'));

But the import('./screens/Products/List') part triggers a TypeScript error, stating:

Type error: Type 'Promise<typeof import("/Users/johannesklauss/Documents/Development/ay-coding-challenge/src/screens/Products/List")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.
  Property 'default' is missing in type 'typeof import("/Users/johannesklauss/Documents/Development/ay-coding-challenge/src/screens/Products/List")' but required in type '{ default: ComponentType<any>; }'.

I am not quite sure what I am supposed to do here to get it to work.

Circumlunar

Answer 1

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 })),
);

Postgraduate

That works perfectly. And how would I go about lazy loading multiple none default exports from a module? Do I have to do the second approach for each export? – Barbitone

@JohannesKlauß, yes, lazy() will only render a single component, so you have to repeat the wrapping for every one needed – Postgraduate

That's really ugly. Especially since you can only have one default per module. – Fluted

What types should be added to this for TypeScript? – Inodorous

@JamesHancock you can check out my answer, react-lazily solves multiple components per module const { One, Two, Three } = lazily(() => import('./module')) – Itself

@Inodorous this already has proper typescript types, you can see typescript example in codesandbox.io/s/react-lazily-vs-react-iqy23 – Itself

Answer 2

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

Itself

Answer 3

Another solution would be:

1. Import using lazy

const ScreensProductList = lazy(() => import('./screens/Products/List'));

2. Set the type on the export

React hooks

import { FunctionComponent /*, FC */ } from 'react';

const List = () => (
  return </>;
);

export default List as FunctionComponent; // as FC;

React class components

import { Component, Fragment, ComponentType } from 'react';

class List extends Component {
  render() {
    return <Fragment />;
  }
}

export default List as ComponentType;

Jacey

Answer 4

const LazyCart = React.lazy(async () => ({ default: (await import('../Components/market/LazyCart')).LazyCart }))

Merrile

Answer 5

This is the proper syntax. It works also in the Webstorm IDE (the other syntaxes shown here are still showing a warning)

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

Ogle

Answer 6

Just to expand on this answer. This also works for the dynamic imports.

const Navbar = dynamic(() => import('../components/Navbar'), {
  ssr: false,
});

Where Navbar is a default exported component.

const Navbar = () => ()


export default Navbar

Gilkey

Answer 7

You can create an index.ts file where you can export all your components like in this eg. :

export {default as YourComponentName} from "./YourComponentName";

After that you can use React.lazy:

React.lazy(() => import("../components/folder-name-where-the-index-file-is-created").then(({YourComponentName}) => ({default: YourComponentName})))

Sheenasheeny