Consufing error when forgot to define JSX.ElementChildrenAttribute type

[uhyo]

🔎 Search Terms

TS2745 This JSX tag's children expects type which requires multiple children but only a single child was provided
ElementChildrenAttribute

🕗 Version & Regression Information

• This changed between versions v4.9.5 and 5.0.4

⏯ Playground Link

https://www.typescriptlang.org/play/?jsx=4#code/CYUwxgNghgTiAEBzCB7ARlC8DeAoe8AdlALYgDOADlGAgFIDKAGjvgfAJaEAuIMAZjQQBJHjC7kOYAKIQQZHuVbt2ACwCMALhwBfNgT3743AJ6UEs+SB7wAvPHLdxhRAG5cRgPSfOPPoNp4SwVuAGFVDghgOEIAQW4nDjQAV15ldm92MAiomO1sHXcVTL0DXEMwFEJHeAAVDm45O3gACkoYFEpyfPhsyOjrbUdnRHgdAEo7AD54AB4NKex2zvIAOj7c6x1ZzwX3XErq7ngQORDm2frGkCmACVPUABp4AHcUGCiAQh2ruSnXIA

💻 Code

declare global {
  namespace JSX {
    interface IntrinsicElements {
      h1: {}
    }

    type Element = string;

    // interface ElementChildrenAttribute {
    //   children: {};
    // }
  }
}

const Title = (props: { children: string }) => <h1>{props.children}</h1>;

const element = <Title>Hello, world!</Title>;

🙁 Actual behavior

You get the following error on <Title>:

This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided.

The error message is incorrect in that TS believes string requires multiple children, which actually does not.

🙂 Expected behavior

No error; string already accepts single children and actually a single children is provided to Title.

Additional information about the issue

The confusing error disappears when you define ElementChildrenAttribute.

I'm not sure whether function components are supposed to typecheck without an explicit definition of ElementChildrenAttribute, or whether we must define it. However, I believe that ElementChildrenAttribute plays no role under "jsx": "react-jsx". Probably ElementChildrenAttribute should not affect type checking under this mode.

I'm reporting this because at least the current error message doesn't look right.

---

Note that in 4.9.5 the error message is different:

Property 'children' is missing in type '{}' but required in type '{ children: string; }'

which kind of makes more sence.