Argument of type ‘Element’ is not assignable to parameter of type ‘ReactElement

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

Method 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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x