This code:

import * as React from 'react';                                                                                              

                                                                                 

const Component = () => <div/>;                                                  

                

function culprit<P>(node: React.ReactElement<P>) {

  console.log(node);

}

                                                             

culprit(<Component/>);

...produces this compilation error when compiling with TypeScript:

error TS2345: Argument of type 'Element' is not assignable to
parameter of type 'ReactElement'. Type 'null' is not assignable
to type 'ReactElement

This only happens when the strictNullChecks TypeScript compilation flag is set to true.

Yes I could disable that flag, but I want it on for added compile-time checking/safety.

If I change the last line to this:

culprit( (<Component/> as React.ReactElement<any>) );

...it works with the flag set to true.

I've recently tried migrating from "plain" JavaScript to TypeScript in a React project and this is tripping up all my tests, so adding all the TypeScript type assertions to all these occurrences in the test code will be a pain.

Is this a bug, or do I have no other choice?