VSCode syntax highlighting breaks for JSX components with generic parameter defaults

Open

#1,033 opened on Jun 20, 2024 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty: 3/5
Estimated time: 1-2 days
Newbie friendliness: 42/100

Issue type: Bug
Clarity: Mostly clear
Activity status: Stale
Tech stack: react, typescript
Domain: tooling

Research direction

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.

Written by the indexing model from the issue text.

Description

🔎 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

Dominant language: TypeScript
Stars: 471
Forks: 149
PR merge metrics: No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.

Similar issues

[MagmaFusion] rapports qualité - contenus des rubriques en anglais manquants Open

Difficulty 2/5 1-3 hours Newbie friendliness 65/100

InseeFr/Bauhaus#1634 · Opened Sep 23, 2026
[Bug]: SSH host picker duplicates configured aliases and known_hosts targets Open

Difficulty 2/5 1-3 hours Newbie friendliness 75/100

pingdotgg/t3code#13270 · Opened Sep 23, 2026
resetSseResponseWait and noteRequestProgress silently fail to re-arm the 60s relay timeout if progress tokens arrive as strings Open

bug v2

Difficulty 2/5 1-3 hours Newbie friendliness 75/100

modelcontextprotocol/inspector#2458 · 1 comment · Opened Sep 23, 2026
Resources: Update work of changsha Open

Difficulty 1/5 Under an hour Newbie friendliness 75/100

railmapgen/rmp-gallery#4068 · Opened Sep 23, 2026
sass-1.105.0.tgz: 1 vulnerabilities (highest severity is: 7.5) Open

Mend: dependency security vulnerability status: needs triage 🕵️‍♀️

Difficulty 2/5 1-3 hours Newbie friendliness 70/100

carbon-design-system/ibm-products#9907 · Opened Sep 23, 2026

More TypeScript issues