Typescript: [React + JSX / strictNullChecks] Cannot create JSX element from ComponentClass<> interface

[JabX]

I'm not sure if I should post the issue here or on DefinitelyTyped, but I think it's a Typescript issue.

The most recent @types/react definition file now states that the render method of a React class can return null, meaning that its signature is now () => Element | null.

The problem is that something as simple as this:

const Test = class extends React.Component<{}, {}> {};
return <Test />;

now outputs an error:

JSX element type '(Anonymous class)' is not a constructor function for JSX elements.
  Types of property 'render' are incompatible.
    Type '() => Element | null' is not assignable to type '() => Element'.
      Type 'Element | null' is not assignable to type 'Element'.
        Type 'null' is not assignable to type 'Element'.

because Typescript (I suppose?) expects the former () => Element signature.

Returning null is perfectly valid in a render function so the problem isn't in the definition file (at least not in the Component definition).

[RyanCavanaugh]

The problem is the .d.ts file. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/types-2.0/react/index.d.ts#L2348 should say render(): JSX.Element | null;

[tyleralves]

I'm getting the same issue in pure functional components:

function NavLinks({isAuthed}: {isAuthed: boolean}) {
  return isAuthed === true
    ? (
      <ul>
        <li><Link to='/'>{'Home'}</Link></li>
      </ul>
    )
    : null;
}

ERROR in [at-loader] app\components\Navigation\Navigation.tsx:34:9
    JSX element type 'Element | null' is not a constructor function for JSX elements.
  Type 'null' is not assignable to type 'ElementClass'.

[christensena]

I'm getting same issue on stateless component too (v 15.0.4 of @types/react):

const StatelessComponent: React.StatelessComponent<IProps> = (props) => {
    const {condition} = props;
    if (condition) {
        return null;
    }
    return (
        <p>...</p>
    );
};

(14,7): error TS2322: Type '(props: IProps & { children?: ReactNode; }) => Element | null' is not assignable to type 'StatelessComponent<IProps>'.
  Type 'Element | null' is not assignable to type 'ReactElement<any>'.
    Type 'null' is not assignable to type 'ReactElement<any>'.

[martinnov92]

Hello, I have got the same issue. I am using Ant Design components, so far it was ok, but today when I tried to use it I started to get errors: error TS1192: Module '"C:/Users/Martin/Desktop/typescripttest/node_modules/@types/react/index"' has no default export. Does anyone know what could I do to make it work? I tried to install newer typescript, but it didn´t work. Thank you.

@types/react 15.0.9,
typescript: 2.1.6

[trinitroglycerin]

@martinnov92 try using import * as React from 'react' instead of import React from react

[martinnov92]

@danpantry Hi, thank you, it helped + I had to type "allowSyntheticDefaultImports": true in tsconfig.json

[trinitroglycerin]

@martinnov92 you should only have to do one of those things. I would not recommend enabling allowSyntheticDefaultImports as it may end up in runtime errors (type checker thinks something is there but actually isn't at runtime) unless you are using something like Babel which has interop helpers between commonjs/es6 modules (that's what this was made for)