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

Comienza con la reproducción vinculada de jsx-syntax-bug y los archivos de gramática de TypeScript-TmLanguage responsables del resaltado de JSX. Compara el ejemplo con el issue relacionado de TypeScript y, después, verifica que un componente JSX genérico con un parámetro de tipo predeterminado ya no se marque como error, mientras que los ejemplos existentes sigan resaltándose correctamente.