Fix JSX fragment children type checking in react-jsx mode #62743

Copilot · 2025-11-10T15:56:07Z

JSX fragments (<>...</>) in react-jsx/react-jsxdev modes were not type-checking children, while explicit <Fragment> worked correctly:

// @jsx: react-jsx
import { Fragment } from "@/jsx-runtime";

type JsxElement = string | ((arg: { foo: "bar" }) => void);
interface FragmentProps { children?: JsxElement; }
export const Fragment: (props: FragmentProps) => any;

<Fragment>{({ foo }) => "ok"}</Fragment>;  // ✓ foo: "bar"
<>{({ foo }) => "not ok"}</>;              // ✗ foo: any (before fix)

Changes

Extended fragment factory resolution to modern JSX modes

getJSXFragmentType: Added JsxEmit.ReactJSX and JsxEmit.ReactJSXDev to shouldResolveFactoryReference check
Previously only JsxEmit.React was checked, causing fragments to return anyType in modern modes

Added contextual typing for fragment children

createJsxAttributesTypeFromAttributesProperty: Extract Fragment props type from factory signature and derive children contextual type
checkJsxChildren: Accept optional contextual type parameter, apply to fragment child expressions via checkExpressionForMutableLocationWithContextualType
Regular JSX elements unchanged - only fragments compute contextual type this way

Fixed error message for modern JSX modes

getJSXFragmentType: When using react-jsx/react-jsxdev modes, error messages now correctly reference "Fragment" instead of "React"
This ensures accurate error messages when using custom JSX import sources (e.g., @jsxImportSource preact)

Test Coverage

Added jsxFragmentChildrenCheck.tsx validating both syntaxes produce identical type checking.

Updated baselines for existing tests now correctly report error 2879 when Fragment factory is missing in react-jsx modes (previously unreported due to anyType early return), with accurate error messages showing "Fragment" as the expected factory name.

Original prompt

This section details on the original issue you should resolve

<issue_title>JSX Fragments are in-properly typed with <></> syntax, when using react-jsx JSX option</issue_title>
<issue_description>### 🔎 Search Terms

JSX, Fragment, children type

🕗 Version & Regression Information

Bug exists since TypeScript introduces "jsx": "react-jsx" from version 4.1.2 until next version (6.0.0-dev.20250830).

⏯ Playground Link

https://stackblitz.com/edit/stackblitz-starters-sffhmvvz?file=index.tsx

💻 Code
import { Fragment } from "@/jsx-runtime";

<Fragment>
  {"ok"}
  {({ foo }) => "also ok"}
</Fragment>;

<>
  {"ok"}
  {({ foo }) => "not ok"}
  {/* ^ Binding element 'foo' implicitly has an 'any' type. */}
</>;
With following @/jsx-runtime definition:
export const jsx = (...args: unknown[]) => {};

type JsxElement =
  | JsxElementArray
  | undefined
  | string
  | ((arg: { foo: "bar " }) => void);
interface JsxElementArray extends Array<JsxElement> {}

interface FragmentProps {
  children?: JsxElement;
}

export const Fragment = (props: FragmentProps) => {};
and tsconfig:
{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@",
    // [...]
  }
}
🙁 Actual behavior

The first JSX expression using <Fragment> pass the type checking while the second JSX using <> syntax reports error due to it's children was typed to any:
index.tsx:10:7 - error TS7031: Binding element 'foo' implicitly has an 'any' type.

10   {({ foo }) => "not ok"}
         ~~~


Found 1 error in index.tsx:10
🙂 Expected behavior

These two JSX expressions should both pass the type checking.

Additional information about the issue

This issue was first mentioned at #50429 and fixed in #59933, but the fix only take effects on "jsx": "react" not "jsx": "react-jsx", while the latter is a more encouraged approach in a modern project.</issue_description>

<agent_instructions>Read the crosslinked issues and PRs, construct a test case that shows the issue and commit it, then work to fix the bug.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes JSX Fragments are in-properly typed with <></> syntax, when using react-jsx JSX option #62358

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

…x mode Co-authored-by: jakebailey <[email protected]>

… regular JSX elements Co-authored-by: jakebailey <[email protected]>

tests/baselines/reference/jsxJsxsCjsTransformCustomImportPragma(jsx=react-jsx).errors.txt

… modes Co-authored-by: jakebailey <[email protected]>

jakebailey · 2025-11-11T20:10:50Z

@typescript-bot test it

typescript-bot · 2025-11-11T20:10:56Z

Starting jobs; this comment will be updated as builds start and complete.

Command	Status	Results
`test top400`	✅ Started	✅ Results
`user test this`	✅ Started	✅ Results
`run dt`	✅ Started	✅ Results
`perf test this faster`	✅ Started	👀 Results

typescript-bot · 2025-11-11T20:34:12Z

Hey @jakebailey, the results of running the DT tests are ready.

Everything looks the same!

You can check the log here.

typescript-bot · 2025-11-11T20:40:02Z

@jakebailey Here are the results of running the user tests with tsc comparing main and refs/pull/62743/merge:

There were infrastructure failures potentially unrelated to your change:

1 instance of "Git clone failed"

Otherwise...

Everything looks good!

typescript-bot · 2025-11-11T21:03:23Z

@jakebailey
The results of the perf run you requested are in!

Here they are:

tsc

Comparison Report - baseline..pr

_Metric	_baseline	_pr	_Delta	_Best	_Worst	_p-value
_{Compiler-Unions - node (v18.15.0, x64)}
_Errors	₁	₁	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_62,370	_62,370	_~	_~	_~	_{p=1.000 n=6}
_Types	_50,386	_50,386	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{195,044k (± 0.93%)}	_{195,639k (± 0.82%)}	_~	_192,379k	_196,454k	_{p=0.471 n=6}
_{Parse Time}	_{1.60s (± 1.23%)}	_{1.60s (± 0.83%)}	_~	_1.58s	_1.62s	_{p=0.720 n=6}
_{Bind Time}	_{0.87s (± 1.18%)}	_{0.88s (± 1.88%)}	_~	_0.86s	_0.90s	_{p=1.000 n=6}
_{Check Time}	_{11.98s (± 0.51%)}	_{11.98s (± 0.59%)}	_~	_11.86s	_12.05s	_{p=0.872 n=6}
_{Emit Time}	_{3.43s (± 4.16%)}	_{3.43s (± 3.30%)}	_~	_3.29s	_3.59s	_{p=0.936 n=6}
_{Total Time}	_{17.89s (± 0.90%)}	_{17.88s (± 0.94%)}	_~	_17.67s	_18.09s	_{p=0.936 n=6}
_{angular-1 - node (v18.15.0, x64)}
_Errors	₂	₂	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_956,047	_956,047	_~	_~	_~	_{p=1.000 n=6}
_Types	_415,881	_415,881	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{1,255,242k (± 0.01%)}	_{1,255,199k (± 0.01%)}	_~	_1,255,115k	_1,255,287k	_{p=0.575 n=6}
_{Parse Time}	_{7.92s (± 0.96%)}	_{8.05s (± 0.98%)}	_{+0.13s (+ 1.58%)}	_7.93s	_8.16s	_{p=0.030 n=6}
_{Bind Time}	_{2.27s (± 0.65%)}	_{2.28s (± 0.78%)}	_~	_2.26s	_2.31s	_{p=0.408 n=6}
_{Check Time}	_{38.73s (± 0.37%)}	_{38.66s (± 0.34%)}	_~	_38.53s	_38.85s	_{p=0.224 n=6}
_{Emit Time}	_{17.88s (± 0.41%)}	_{17.91s (± 0.34%)}	_~	_17.82s	_17.96s	_{p=0.574 n=6}
_{Total Time}	_{66.81s (± 0.24%)}	_{66.90s (± 0.24%)}	_~	_66.71s	_67.18s	_{p=0.521 n=6}
_{mui-docs - node (v18.15.0, x64)}
_Errors	₁	₁	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_553,308	_553,308	_~	_~	_~	_{p=1.000 n=6}
_Types	₈₉	₈₉	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{828,511k (± 0.01%)}	_{828,475k (± 0.00%)}	_~	_828,443k	_828,528k	_{p=0.173 n=6}
_{Parse Time}	_{10.20s (± 0.71%)}	_{10.22s (± 0.61%)}	_~	_10.16s	_10.33s	_{p=0.809 n=6}
_{Bind Time}	_{2.64s (± 0.61%)}	_{2.65s (± 1.03%)}	_~	_2.61s	_2.67s	_{p=0.567 n=6}
_{Check Time}	_0.00s	_0.00s	_~	_~	_~	_{p=1.000 n=6}
_{Emit Time}	_{0.34s (± 3.45%)}	_{0.33s (± 1.91%)}	_~	_0.32s	_0.34s	_{p=0.179 n=6}
_{Total Time}	_{13.18s (± 0.72%)}	_{13.20s (± 0.58%)}	_~	_13.13s	_13.34s	_{p=0.809 n=6}
_{self-build-src - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_1,237,278	_1,237,285	_{+7 (+ 0.00%)}	_~	_~	_{p=0.001 n=6}
_Types	_259,884	_259,884	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{2,426,021k (± 6.10%)}	_{2,547,602k (±11.94%)}	_~	_2,365,140k	_3,093,245k	_{p=0.471 n=6}
_{Parse Time}	_{5.15s (± 1.23%)}	_{5.16s (± 1.42%)}	_~	_5.08s	_5.29s	_{p=0.688 n=6}
_{Bind Time}	_{1.77s (± 0.77%)}	_{1.78s (± 1.37%)}	_~	_1.75s	_1.82s	_{p=0.934 n=6}
_{Check Time}	_{35.20s (± 0.80%)}	_{35.37s (± 0.88%)}	_~	_34.95s	_35.90s	_{p=0.471 n=6}
_{Emit Time}	_{3.02s (± 0.80%)}	_{2.98s (± 1.41%)}	_~	_2.93s	_3.05s	_{p=0.128 n=6}
_{Total Time}	_{45.15s (± 0.49%)}	_{45.29s (± 0.78%)}	_~	_44.88s	_45.92s	_{p=0.575 n=6}
_{self-build-src-public-api - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_1,237,278	_1,237,285	_{+7 (+ 0.00%)}	_~	_~	_{p=0.001 n=6}
_Types	_259,884	_259,884	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{3,159,630k (± 0.02%)}	_{3,039,066k (± 9.72%)}	_~	_2,435,432k	_3,160,770k	_{p=1.000 n=6}
_{Parse Time}	_{6.84s (± 1.09%)}	_{6.74s (± 1.63%)}	_~	_6.57s	_6.87s	_{p=0.093 n=6}
_{Bind Time}	_{2.16s (± 1.34%)}	_{2.15s (± 0.95%)}	_~	_2.12s	_2.18s	_{p=1.000 n=6}
_{Check Time}	_{42.93s (± 0.27%)}	_{42.72s (± 0.45%)}	_~	_42.34s	_42.85s	_{p=0.066 n=6}
_{Emit Time}	_{3.49s (± 3.17%)}	_{3.51s (± 2.04%)}	_~	_3.44s	_3.59s	_{p=0.936 n=6}
_{Total Time}	_{55.42s (± 0.48%)}	_{55.13s (± 0.60%)}	_~	_54.53s	_55.42s	_{p=0.128 n=6}
_{self-compiler - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_262,523	_262,530	_{+7 (+ 0.00%)}	_~	_~	_{p=0.001 n=6}
_Types	_104,049	_104,049	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{440,751k (± 0.01%)}	_{440,749k (± 0.01%)}	_~	_440,686k	_440,823k	_{p=0.810 n=6}
_{Parse Time}	_{3.52s (± 0.98%)}	_{3.52s (± 0.76%)}	_~	_3.48s	_3.56s	_{p=0.936 n=6}
_{Bind Time}	_{1.33s (± 0.74%)}	_{1.32s (± 0.80%)}	_~	_1.30s	_1.33s	_{p=0.054 n=6}
_{Check Time}	_{19.11s (± 0.37%)}	_{19.11s (± 0.42%)}	_~	_19.02s	_19.26s	_{p=0.809 n=6}
_{Emit Time}	_{1.53s (± 1.23%)}	_{1.53s (± 0.76%)}	_~	_1.51s	_1.54s	_{p=0.807 n=6}
_{Total Time}	_{25.48s (± 0.37%)}	_{25.47s (± 0.25%)}	_~	_25.44s	_25.60s	_{p=0.933 n=6}
_{ts-pre-modules - node (v18.15.0, x64)}
_Errors	₇₂	₇₂	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_225,386	_225,386	_~	_~	_~	_{p=1.000 n=6}
_Types	_94,304	_94,304	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{370,136k (± 0.09%)}	_{370,164k (± 0.09%)}	_~	_369,911k	_370,793k	_{p=0.575 n=6}
_{Parse Time}	_{2.83s (± 0.92%)}	_{2.81s (± 1.52%)}	_~	_2.74s	_2.86s	_{p=0.684 n=6}
_{Bind Time}	_{1.60s (± 0.88%)}	_{1.61s (± 0.85%)}	_~	_1.59s	_1.62s	_{p=0.461 n=6}
_{Check Time}	_{16.51s (± 0.18%)}	_{16.45s (± 0.18%)}	_{-0.06s (- 0.36%)}	_16.41s	_16.49s	_{p=0.016 n=6}
_{Emit Time}	_0.00s	_{0.00s (±244.70%)}	_~	_0.00s	_0.01s	_{p=0.405 n=6}
_{Total Time}	_{20.94s (± 0.17%)}	_{20.88s (± 0.28%)}	_~	_20.79s	_20.95s	_{p=0.065 n=6}
_{vscode - node (v18.15.0, x64)}
_Errors	₅	₅	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_4,023,575	_4,023,575	_~	_~	_~	_{p=1.000 n=6}
_Types	_1,263,832	_1,263,832	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{3,806,262k (± 0.00%)}	_{3,806,473k (± 0.01%)}	_~	_3,806,123k	_3,806,839k	_{p=0.230 n=6}
_{Parse Time}	_{15.45s (± 0.53%)}	_{15.48s (± 0.79%)}	_~	_15.28s	_15.59s	_{p=0.630 n=6}
_{Bind Time}	_{5.07s (± 1.99%)}	_{5.04s (± 0.60%)}	_~	_5.01s	_5.09s	_{p=0.808 n=6}
_{Check Time}	_{104.26s (± 3.63%)}	_{107.51s (± 4.09%)}	_~	_102.87s	_112.63s	_{p=0.065 n=6}
_{Emit Time}	_{40.20s (±14.34%)}	_{39.96s (±27.07%)}	_~	_31.60s	_61.07s	_{p=0.298 n=6}
_{Total Time}	_{164.98s (± 2.45%)}	_{168.00s (± 5.66%)}	_~	_161.47s	_186.87s	_{p=0.689 n=6}
_{webpack - node (v18.15.0, x64)}
_Errors	₄₀	₄₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_379,225	_379,225	_~	_~	_~	_{p=1.000 n=6}
_Types	_166,383	_166,383	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{538,103k (± 0.01%)}	_{538,097k (± 0.01%)}	_~	_537,989k	_538,175k	_{p=0.810 n=6}
_{Parse Time}	_{4.60s (± 0.36%)}	_{4.60s (± 0.76%)}	_~	_4.57s	_4.66s	_{p=1.000 n=6}
_{Bind Time}	_{1.96s (± 1.54%)}	_{1.96s (± 1.19%)}	_~	_1.92s	_1.99s	_{p=0.371 n=6}
_{Check Time}	_{22.85s (± 0.43%)}	_{22.83s (± 0.48%)}	_~	_22.71s	_23.03s	_{p=0.575 n=6}
_{Emit Time}	_0.00s	_0.00s	_~	_~	_~	_{p=1.000 n=6}
_{Total Time}	_{29.41s (± 0.38%)}	_{29.39s (± 0.35%)}	_~	_29.26s	_29.57s	_{p=0.575 n=6}
_{xstate-main - node (v18.15.0, x64)}
_Errors	₃₀	₃₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_690,485	_690,641	_{+156 (+ 0.02%)}	_~	_~	_{p=0.001 n=6}
_Types	_208,757	_208,871	_{+114 (+ 0.05%)}	_~	_~	_{p=0.001 n=6}
_{Memory used}	_{586,488k (± 0.03%)}	_{586,497k (± 0.02%)}	_~	_586,420k	_586,754k	_{p=0.689 n=6}
_{Parse Time}	_{5.20s (± 0.52%)}	_{5.19s (± 0.71%)}	_~	_5.15s	_5.24s	_{p=0.469 n=6}
_{Bind Time}	_{1.67s (± 1.54%)}	_{1.68s (± 1.06%)}	_~	_1.66s	_1.70s	_{p=0.682 n=6}
_{Check Time}	_{25.83s (± 2.00%)}	_{26.14s (± 2.02%)}	_~	_25.18s	_26.70s	_{p=0.298 n=6}
_{Emit Time}	_{0.01s (±109.43%)}	_{0.01s (±77.38%)}	_~	_0.00s	_0.01s	_{p=0.640 n=6}
_{Total Time}	_{32.70s (± 1.63%)}	_{33.02s (± 1.64%)}	_~	_32.06s	_33.62s	_{p=0.336 n=6}

System info unknown

Hosts

node (v18.15.0, x64)

Scenarios

Compiler-Unions - node (v18.15.0, x64)
angular-1 - node (v18.15.0, x64)
mui-docs - node (v18.15.0, x64)
self-build-src - node (v18.15.0, x64)
self-build-src-public-api - node (v18.15.0, x64)
self-compiler - node (v18.15.0, x64)
ts-pre-modules - node (v18.15.0, x64)
vscode - node (v18.15.0, x64)
webpack - node (v18.15.0, x64)
xstate-main - node (v18.15.0, x64)

_Benchmark	_Name	_Iterations
_Current	_pr	₆
_Baseline	_baseline	₆

Developer Information:

Download Benchmarks

typescript-bot · 2025-11-11T21:38:22Z

@jakebailey Here are the results of running the top 400 repos with tsc comparing main and refs/pull/62743/merge:

Everything looks good!

jakebailey · 2025-11-11T22:48:22Z

@typescript-bot pack this

typescript-bot · 2025-11-11T22:48:27Z

Starting jobs; this comment will be updated as builds start and complete.

Command	Status	Results
`pack this`	✅ Started

jakebailey · 2025-11-11T23:10:07Z

@typescript-bot pack this

typescript-bot · 2025-11-11T23:10:11Z

Starting jobs; this comment will be updated as builds start and complete.

Command	Status	Results
`pack this`	✅ Started	✅ Results

typescript-bot · 2025-11-11T23:14:10Z

Hey @jakebailey, I've packed this into an installable tgz. You can install it for testing by referencing it in your package.json like so:

{
    "devDependencies": {
        "typescript": "https://typescript.visualstudio.com/cf7ac146-d525-443c-b23c-0d58337efebc/_apis/build/builds/166506/artifacts?artifactName=tgz&fileId=6A682EAE4D1D38D9F14653D0C3D34184B74CAB8900DC1B4D91724814333BD3A102&fileName=/typescript-6.0.0-insiders.20251111.tgz"
    }
}

and then running npm install.

ArnaudBarre · 2025-11-11T23:32:50Z

I just tested the build and I now get an error if an object is passed as a child of a shorthand fragment when using react-jsx 🎉

Running on 560 tsx files, it caught the same two cases than my custom linter rule (opaque type which is a number at runtime)

Initial plan

607b949

Copilot AI assigned Copilot and jakebailey Nov 10, 2025

typescript-bot added the For Milestone Bug PRs that fix a bug with a specific milestone label Nov 10, 2025

Copilot started work on behalf of jakebailey November 10, 2025 15:56 View session

Copilot AI and others added 2 commits November 10, 2025 16:12

Add test case and implement fix for JSX Fragment typing with react-js…

483093f

…x mode Co-authored-by: jakebailey <[email protected]>

Fix regression: only apply contextual type for fragment children, not…

7fcfd01

… regular JSX elements Co-authored-by: jakebailey <[email protected]>

Copilot AI changed the title ~~[WIP] Fix improper typing for JSX fragments with react-jsx~~ Fix JSX fragment children type checking in react-jsx mode Nov 10, 2025

Copilot AI requested a review from jakebailey November 10, 2025 16:37

Copilot finished work on behalf of jakebailey November 10, 2025 16:37

jakebailey reviewed Nov 10, 2025

View reviewed changes

tests/baselines/reference/jsxJsxsCjsTransformCustomImportPragma(jsx=react-jsx).errors.txt Show resolved Hide resolved

Copilot started work on behalf of jakebailey November 10, 2025 16:39 View session

Fix error message to show 'Fragment' instead of 'React' for react-jsx…

983250f

… modes Co-authored-by: jakebailey <[email protected]>

Copilot AI requested a review from jakebailey November 10, 2025 16:52

Copilot finished work on behalf of jakebailey November 10, 2025 16:52

Fix JSX fragment children type checking in react-jsx mode #62743

Are you sure you want to change the base?

Fix JSX fragment children type checking in react-jsx mode #62743

Conversation

Copilot AI commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Test Coverage

🕗 Version & Regression Information

⏯ Playground Link

💻 Code

🙁 Actual behavior

🙂 Expected behavior

Additional information about the issue

Comments on the Issue (you are @copilot in this section)

Uh oh!

Uh oh!

jakebailey commented Nov 11, 2025

Uh oh!

typescript-bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

typescript-bot commented Nov 11, 2025

Uh oh!

typescript-bot commented Nov 11, 2025

Uh oh!

typescript-bot commented Nov 11, 2025

tsc

Uh oh!

typescript-bot commented Nov 11, 2025

Uh oh!

jakebailey commented Nov 11, 2025

Uh oh!

typescript-bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jakebailey commented Nov 11, 2025

Uh oh!

typescript-bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

typescript-bot commented Nov 11, 2025

Uh oh!

ArnaudBarre commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Copilot AI commented Nov 10, 2025 •

edited

Loading

typescript-bot commented Nov 11, 2025 •

edited

Loading

typescript-bot commented Nov 11, 2025 •

edited

Loading

typescript-bot commented Nov 11, 2025 •

edited

Loading

ArnaudBarre commented Nov 11, 2025 •

edited

Loading