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

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

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

Duplicate #52232

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

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.

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?

no React 4.9.5 no type errors

no react 5.0.0-rc type errors

Bisected to #52282

chore: revert TypeScript 5 because of JSX detection issues

Right, this is basically the converse report of #50916

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?

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

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?

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.

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;
}

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

Navigation Menu

Repository navigation

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

Bug Report

🔎 Search Terms

🕗 Version & Regression Information

⏯ Playground Link

💻 Code

🙁 Actual behavior

🙂 Expected behavior

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Bug Report

🔎 Search Terms

🕗 Version & Regression Information

⏯ Playground Link

💻 Code

🙁 Actual behavior

🙂 Expected behavior

Activity

RyanCavanaugh commented on Mar 10, 2023

eps1lon commented on Mar 10, 2023

RyanCavanaugh commented on Mar 10, 2023

eps1lon commented on Mar 11, 2023

eps1lon commented on Mar 11, 2023

Andarist commented on Mar 19, 2023

RyanCavanaugh commented on Mar 30, 2023

eps1lon commented on Mar 30, 2023

typescript-bot commented on Apr 2, 2023

greypants commented on Apr 3, 2023

noahtallen commented on Jul 31, 2023

Andarist commented on Aug 1, 2023

rejetto commented on Apr 20, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions