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

[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>

[RyanCavanaugh]

Duplicate #52232

[eps1lon]

The linked issue repros in 4.9.4 while mine does not. Could you clarify why you think it is a duplicate?

[RyanCavanaugh]

I believe the root cause here - isValidElement and ReactElement having different default type arguments, thus resulting in subtyping assymmetry, is still the same. If you have a repro that doesn't depend on React we can bisect it and verify.

[eps1lon]

So if it turns out to root cause is a dupe, you won't consider this a 5.0 regression even though it only started failing when going from 4.9 to 5.0?

[eps1lon]

no React 4.9.5 no type errors

no react 5.0.0-rc type errors

[Andarist]

Bisected to #52282

[RyanCavanaugh]

Right, this is basically the converse report of #50916

[eps1lon]

I'm not following the labelling here. It's considered a duplicate of an issue that was closed by the PR that caused it? Sounds more like you're saying this is intended behavior?

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[greypants]

I'm also having a hard time trying to follow the thread here... I still have this issue on 5.0.3. Are we waiting on a change in @types/react then? Or is this supposed to be fixed already?

[noahtallen]

This issue unfortunately isn't fixed! I'm still getting errors in Typescript 5.1.6. (I'm pretty sure this is the same issue.)

Here is a playground showing the error. The problem is that object is ReactElement<Props> does not work to narrow the types, but object is ReactElement does work.

[Andarist]

Just a note: it works when u "forward" the P TS playground:

type Foo = {
	bar: string;
}

// Stub of ReactElement:
interface ReactElement<P = any> {
	props: P;
}

declare function isValidElement<P>(object: {} | null | undefined): object is ReactElement<P>

function doSomething<P>(input: Foo | ReactElement<P>) {
	if (isValidElement(input)) {
		return input;
	}
	// Type should be narrowed, and it is
	return input.bar;
}

[rejetto]

an easy fix for the problem is to not use just ReactElement but ReactElement<unknown> (if you don't know a more specific type)