Repository navigation
TS 5.8 JSX.ElementChildrenAttribute break #61354
Description
🔎 Search Terms
5.8, return, type
🕗 Version & Regression Information
- This changed between versions 5.7.3 and 5.8
⏯ Playground Link
No response
💻 Code
I defined custom ElementChildrenAttribute, it work well before TS 5.8
declare global {
namespace JSX {
// infer children type
export interface ElementChildrenAttribute {
$default: {};
}
}
}Once I upgrade to TS 5.8, JSX like below throw the errors.
const $el = <div>test</div>🙁 Actual behavior
Type { children: Element[]; } is not assignable to type
🙂 Expected behavior
no errors
Additional information about the issue
full custom JSX declare
https://github.com/innoai-tech/vuekit/blob/main/nodepkg/vue-jsx-runtime/src/jsx-runtime.ts#L104-L153
Activity
uhyo commentedon Mar 5, 2025
Hi there, I'm the one who broke this 😨 (#60880)
But I believe the new error is correct.
A bit of history:
In the classic JSX transpilation mode (
jsx: "react") the name of the prop for JSX children is up to thecreateElementfunction. Custom JSX runtime could use non-childrennames. The role ofElementChildrenAttributeis to tell TypeScript the name of the prop used bycreateElementfor JSX children.However, under the modern
jsx: "react-jsx"setting, the name of the prop for JSX children is alwayschildrenand is hardcoded to the transpilation result.This means that in the new mode you can't change the name of
children. ThereinElementChildrenAttributeplays no role.This is why I changed so that
ElementChildrenAttributeis ignored under thejsx: "react-jsx"mode.I believe you should stop using
ElementChildrenAttributeand find another way to acomplish what you want (sorry, I'm not sure why you've been usingElementChildrenAttributein your custom JSX runtime)morlay commentedon Mar 5, 2025
uhyo (@uhyo) Sure.
I will try to find another way to solve it.
However I think it is undocumented break change.
This feature here so many years 😂
https://www.typescriptlang.org/docs/handbook/jsx.html#children-type-checking
morlay commentedon Mar 6, 2025
resolved.
just force rename public prop
$defaultwhich as default slot in vue tochildren