Skip to content

5.0: Narrowing from type-guards ignored when constructing JSX call (2604) #53178

@eps1lon

Description

@eps1lon

Bug Report

🔎 Search Terms

does not have any construct or call signatures.(2604)

🕗 Version & Regression Information

  • This changed between versions 4.9.5 and 5.0.1-rc (I'm pretty sure it used to work in 5.0.0-beta but can't verify with playground)

⏯ Playground Link

Playground link with relevant code

💻 Code

We saw 8 errors in our codebase pop up. This might be a fairly common issue in React Native codebases or any codebase having types like React.ComponentType<any> | React.ReactElement.

import * as React from 'react'

// `@types/react-native` FlatListProps['ListHeaderComponent']
declare const ListHeaderComponent: React.ComponentType<any> | React.ReactElement

// JSX element type 'ListHeaderComponent' does not have any construct or call signatures.(2604)
const elementB = React.isValidElement(ListHeaderComponent) ? ListHeaderComponent : <ListHeaderComponent />

Note that this works either with either

-declare const ListHeaderComponent: React.ComponentType<any> | React.ReactElement
+declare const ListHeaderComponent: React.ComponentType<any> | React.ReactElement<unknown>

which requires a change in @types/react-native

or

-declare function isValidElement(maybeElement: unknown): maybeElement is React.ReactElement<unknown>
+declare function isValidElement(maybeElement: unknown): maybeElement is React.ReactElement<any>

which requires a change in @types/react.

The change in @types/react-native makes more sense but means other type libraries need to update as well.

3rd option is making React.ReactElement default to React.ReactElement<unkown> instead of React.ReactElement<any> but that might be even more disruptive.

I'll fiddle with each alternative but I would appreciate if you could check if this new behavior in TypeScript is so valueable to warrant this breakage in the ecosystem.

🙁 Actual behavior

JSX element type 'ListHeaderComponent' does not have any construct or call signatures.(2604)

🙂 Expected behavior

No type error since isValidElement narrows to React.ReactElement i.e. the else branch should just be React.ComponentType<any>

Metadata

Metadata

Assignees

No one assigned

    Labels

    DuplicateAn existing issue was already created

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions