React.lazy has an incorrect type definition

[nicholas-l]

I am getting an error when using React.lazy:

Cannot call `React.lazy` with function bound to `component` because in the return value:
 - Either a callable signature is missing in `Promise` [1] but exists in `React.StatelessFunctionalComponent` [2].
 - Or `Promise` [1] is incompatible with statics of `React.Component` [3].

as an example:

const asyncGraphiQL = React.lazy(() =>
  import(/* webpackChunkName: "graphiql" */ './containers/graphiql')
);

Should line be returning a promise instead?

declare export function lazy<P>(
    component: () => Promise<{ default: React$ComponentType<P> }>,
  ): React$ComponentType<P>;

[jbrown215]

@bvaughn: Mind helping out here?

Is it always meant to render a {default: React$ComponentType<P>} from an export?

[jbrown215]

Ah, from the react docs:

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

The type here is wrong. Your type is right. Want to put up a PR?

[bvaughn]

I'd be happy to add this change to my PR if it's easier for everyone.

[nicholas-l]

@bvaughn yes, go for it :)

[alexeyraspopov]

Also, "StatelessFunctionalComponent" seems to be using the old terminology. I guess we can change it to "FunctionComponent", right?

[jbrown215]

@alexeyraspopov: Yes, but that's a very disruptive and breaking change. We certainly should change the name, but we should have a codemod ready to go along with the release.