[tsx] <T extends U></T>; is not parsed correctly

[nicolo-ribaudo]

Bug Report

🔎 Search Terms

jsx extends ambiguity type parameters

🕗 Version & Regression Information

I only tested 4.5.4 and Nighty on the repl

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about "JSX and React"

⏯ Playground Link

Playground link with relevant code

💻 Code

// This works
<T implements U></T>;

// This doesn't
<T extends U></T>;

🙁 Actual behavior

The second JSX expression is parsed as a malformed arrow function

🙂 Expected behavior

Both are valid JSX elements

[RyanCavanaugh]

In this you'd need to write <T U extends>, etc instead. Otherwise we'd have to do a lookahead of the entire rest of the file.

[Josh-Cena]

Seems Babel handles it correctly 🤔

[RyanCavanaugh]

The Babel behavior is surprising to say the least

This is parsed as a <T>...</T> JSX element with the content "(x: T) => ", console.log('hi'), "f(); //"

let f = <T extends U>(x: T) => { console.log('hi') }

f();

//</T>

This is parsed as a generic arrow function:

let f = <T extends U>(x: T) => { console.log('hi'); }

f();

//</T>

Not sure I would call this "correctly" - it appears to be entirely heuristical

[Josh-Cena]

Ah, that's interesting to know😄

[nicolo-ribaudo]

Yeah, Babel first tries to parse it as JSX and then falls back to an arrow function. In your specific example, the semicolon make console.log('hi'); an invalid expression that cannot be used in JSX interpolations. With the current Babel implementation, can force it to always be an arrow by adding a trailing comma (<T extends U,>), similarly to how you need a trailing comma to disambiguate <T>.

I reported this "bug" while checking what need to do to align to your parser.

[Josh-Cena]

FWIW, I actually like Babel's result more. It's better to be parsed as correctly as possible before spitting an error.

[fatcerberus]

Downside of the Babel behavior is that it basically requires infinite lookahead.