VSCode syntax highlighting breaks for JSX components with generic parameter defaults

🔎 Search Terms

"vscode jsx generics"

🕗 Version & Regression Information

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

⏯ Playground Link

https://github.com/james-yeoman/jsx-syntax-bug

💻 Code

import React from "react";

type FooProps<T> = {
  genericProp: T
}

export const Foo = <T = string,>({ genericProp }: FooProps<T>) => {
//                    ^ Error highlighting starts here
  return <div>{String(genericProp)}</div>
}

🙁 Actual behavior

When defining a React JSX component as a Generic component, if you add a type default to the type parameter, the syntax highlighting marks it as an error, but no error is actually reported.

If you remove the fallback, or add an extends, the syntax error highlighting goes away.

The readme at my reproduction repo has screenshots of the bug in action, in case I've not explained the behaviour particularly well.

🙂 Expected behavior

Syntax highlighting should be able to handle Generics with default types in JSX files.

Additional information about the issue

https://github.com/microsoft/TypeScript/issues/45939 - Highly related, but is for typescript itself, rather than for VSCode's syntax highlighting.

My VSCode installation About content

Version: 1.90.0
Commit: 89de5a8d4d6205e5b11647eb6a74844ca23d2573
Date: 2024-06-04T19:43:07.605Z
Electron: 29.4.0
ElectronBuildId: 9593362
Chromium: 122.0.6261.156
Node.js: 20.9.0
V8: 12.2.281.27-electron.0
OS: Linux x64 5.15.0-112-generic

Start with the linked jsx-syntax-bug reproduction and the TypeScript-TmLanguage grammar files responsible for JSX highlighting. Compare the example with the related TypeScript issue, then verify that a generic JSX component with a default type parameter is no longer marked as an error while the existing examples remain correctly highlighted.