CODEWITHSUNDEEP
javascriptreactjstypescript
pleasedesktop
pleasedesktop

Reputation: 1525

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

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?

Upvotes: 58

Views: 187933

Answers (4)

Ryan Walker
Ryan Walker

Reputation: 844

In my specific case it was looking for JSX.Element instead of just Element. Not sure what the correct fix for that is, but updating my type definition to Element | JSX.Element resolved the issue.

Upvotes: 4

Randall
Randall

Reputation: 2858

This happens when I don't return JSX inside of React Fragment or empty tags.

const ErrorMessage: FC<ErrorProps> = (props) => {
    if (!isEmpty(props.errors)) {

        return Object.entries(props.errors).map((item) => (
            <Typography component="span">{item[0]}</Typography>
        ))
    };

    return <></>;
};

When I added empty tags everything worked as expected.

const ErrorMessage: FC<ErrorProps> = (props) => {
    if (!isEmpty(props.errors)) {

        return (
            <>
                {Object.entries(props.errors).map((item) => (
                    <Typography component="span">{item[0]}</Typography>
                ))}
            </>
        )
    };

    return <></>;
};

Also, if we remove the return <></> statement error will be shown. Component, as I wrote, always need to return correct JSX component.

Versions

  • React: 17.0.2
  • @types/react: 17.0.34
  • TypeScript: 4.6.4

Upvotes: 5

TARJU
TARJU

Reputation: 1994

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.

Upvotes: 55

Morten Christiansen
Morten Christiansen

Reputation: 19580

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

Upvotes: 13

Related Questions