Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>

Question

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<any>'.   Type 'null' is not assignable to type 'ReactElement<any> 

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?

Answer 1

If you have JSX inside your component or component test file must have .tsx as your file extension. My code was not compiling as I had the .ts file extension. The moment I renamed it to .tsx/jsx it started working nicely!

Please also note that I was using Typescript, so that's why I renamed it to .tsx. In case you are using ES6 rename it to .jsx.

Answer 2

This is apparently an issue which was introduced in the 15.0.5 React type definitions. If you change to 15.0.4, everything should be fine.

See this issue: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/14284