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.

score 68 · Accepted Answer · answered Jan 15 '19 at 09:31

68

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

answered Jan 15 '19 at 09:31

Denis Zhbankov

1,018
1
10
10

1

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? – Johannes Klauß Jan 15 '19 at 11:10
1

@JohannesKlauß, yes, lazy() will only render a single component, so you have to repeat the wrapping for every one needed – Denis Zhbankov Jan 18 '19 at 16:15
That's really ugly. Especially since you can only have one default per module. – James Hancock Feb 27 '19 at 19:07
What types should be added to this for TypeScript? – reggaeguitar Feb 28 '20 at 17:21
@JamesHancock you can check out my answer, react-lazily solves multiple components per module `const { One, Two, Three } = lazily(() => import('./module'))` – JLarky Jan 03 '21 at 05:32
@reggaeguitar this already has proper typescript types, you can see typescript example in https://codesandbox.io/s/react-lazily-vs-react-iqy23 – JLarky Jan 03 '21 at 05:57

score 11 · Answer 2 · answered Dec 02 '20 at 00:33

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

score 5 · Answer 3 · edited Jul 19 '22 at 18:59

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;

score 1 · Answer 4 · answered Sep 14 '21 at 15:15

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

score 1 · Answer 5 · answered Jan 22 '22 at 14:10

1

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

answered Jan 22 '22 at 14:10

Andrew Li

19
3

score 0 · Answer 6 · answered May 30 '19 at 08:47

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

score 0 · Answer 7 · answered Jan 26 '23 at 12:08

0

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

answered Jan 26 '23 at 12:08

Bojan Tomić

1,007
12
19

Using React.lazy with TypeScript

7 Answers7

1. Import using lazy

2. Set the type on the export

Linked