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

[maxpatiiuk]

🔎 Search Terms

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

🕗 Version & Regression Information

• Reproducible in 5.0.3 - 5.8.3
• The error message was different in 4.9.5 and below: "Property 'children' is missing in type '{}' but required in type '{ children: string; }'"

⏯ Playground Link

https://www.typescriptlang.org/play/?target=99&isolatedModules=true&ts=5.8.3#code/MYewdgzgLgBASgUwIbFgXhgb2AJ2VBAUQBsEBbBMKAGhgDEckBzCqgXwCgOB6bmAFQAWASwgwAUgGUAGjCjMA5GIXARxACZ4wCmAAccIXTAQAPXQlRioAT3MwlUHMLBMdAdxGqYeAI4BXYTwxMj9iKGFdUhhVYQ0tWgAjP1hwYmsYJBgIZyYomI0YNyQxfRAAN2F1BHUAOigIAAoAJgB2ABYAVgBKDlBIEFIa4hAmBoAeSUccgGE1TUoAPkzoJxcx7knVplnY+bAFroBuDgAzPzBUYXAYTZm5rQbMaPvKGDYALixn3a1PlZy3l0sBwYN4EFA-DgwN84pRjpweHwAOogHAAazEJ2cCEKwigghAyRhe164AgAwQQxG4wAciAdrDodwDsczhdwtc6Qy9g0gZgQTBePRGCxKLA3KiMTAsWAEAK8BCoTAxksslM1sz4VwhQBJGDqcAKWBosAgNwwYQnOQiMSiMHEJAEdTvRESGTGUisWDCMiRYTAPFpGCCYpyWw4hRIMDWHQJCxIPwQHGmi1UBA4E4oCNSaQ1HVUVbZYAkchiiA6Uyiep1RotAAMTQAbD0+uTBsNRmN1MIyoKWdq+Dmw7oAXaEsVqtLQkHrogULAAIwATmHOQgiSJ2V9xEtwknUBAMDIzh9SGIYNK6j8AYSUVMSG3cqFhBM86D+JxEAfOPTBhwMBAYBgEhMQ3DxQR4GQVBVxcCBXQaQQoCgXQIHeXgmHAvwEhqUAyG4AARBAZTxBA0n4cN1AIoiTwIMiKO4W8QASbgyGKAgcG4GxzAgbg8HnbhnCqEwalqeoelMXRUVgKpgAdPAp3ZK5oVwfAiE9MUGgFJNiE+KNrGoAV1EdJAAH5dOjAzQQIEwoDMjJow4LpPhzGoSy9Y4OAkqT9QsOScVbWAGGYL1PgaUoUM+flQXyPY7JctyxXhIE0AWN1cwSqgPK8nBYDAb8IF0LM0uBUFstgLicQy9ABVBAAfNUthqmB6rAPwyDjHAmvqhJhAwqgupgHV2KQW8EDGKqFgGhIQApKMBta4hiAG84qhlapjlKsxvOcdjM2ASr1KoABBJCnCSAgIAABQMcwcvSTBOE2ySctTXaiqq7ktBOqZzpxJ4Yq0OyqsOR7jC2l6dvTPacXzdUi2+s7kgQMQHoFMrXqhorYcLf0qpR-Ue0ii11Ds-4XDeEGODYIA

💻 Code

const React = {createElement, Fragment}

// This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided.ts(2745)
console.log(<StringChildren>a string</StringChildren>);
function StringChildren({ children }: { children: string }) {
  return children;
}

// Works fine without children
console.log(<NoChildren />);
function NoChildren() {
  // Fragment works fine
  return <>a string</>;
}

// I don't know if this is related:
// JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)
console.log(<div />);

// JSX typing is based fully on React 19 typings, but simplified to minimal reproducible example
// Exactly the same error occurs with React typings
// (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts)
export declare function createElement(
  sel: any,
  data?: any,
  text?: any
): JSX.Element;

export declare const Fragment: (props: {
  children?: JSX.Element;
}) => JSX.Element;

export namespace JSX {
  export type Element =
    | string
    | number
    | bigint
    | Iterable<Element>
    | boolean
    | null
    | undefined;
  export interface ElementAttributesProperty {}
  export interface ElementChildrenAttribute { children?: Element;}
  export interface IntrinsicAttributes {}
  export interface IntrinsicElements { div: { id?: string };}
}

🙁 Actual behavior

Calling JSX component that accepts string children type emits the following error:

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

🙂 Expected behavior

No error should be emitted

Additional information about the issue

The exact same error is reproducible with official React 19 typings. See tiny reproduction repository: https://github.com/maxpatiiuk/typescript-react-19-jsx-bug

---

Looking at https://github.com/microsoft/TypeScript/blob/main/src/compiler/checker.ts, the error is triggered by the following check:

// Line 21585:
                else if (!isTypeRelatedTo(getIndexedAccessType(source, childrenNameType), childrenTargetType, relation)) {
                    // arity mismatch
                    result = true;
                    const diag = error(
                        containingElement.openingElement.tagName,
                        Diagnostics.This_JSX_tag_s_0_prop_expects_type_1_which_requires_multiple_children_but_only_a_single_child_was_provided,
                        childrenPropName,
                        typeToString(childrenTargetType),
                    );
                    if (errorOutputContainer && errorOutputContainer.skipLogging) {
                        (errorOutputContainer.errors || (errorOutputContainer.errors = [])).push(diag);
                    }
                }

It appears that getIndexedAccessType(source, childrenNameType) tries to get the indexed type of string, which returns unknown type, which is not considered related to string type.

---

Potentially related to #60572, however the suggested workaround in that issue is not working.

[RyanCavanaugh]

Not sure what's going on here, but for any modern JSX development you will basically always want "jsx": "react-jsx" which encodes the more modern semantics (and removes these errors)

[ivan-kleshnin]

Yet NextJS insists on jsx: "preserve":

• mandatory change, jsx was set to preserve vercel/next.js#54456
• jsx was set to preserve (next.js implements its own optimized jsx transform) vercel/next.js#19155

Should a new issue be raised there?

[maxpatiiuk]

We are still using jsx:react because in works better in a monorepo that uses a single tsconfig.json for linting. Tooling like ESLint and Storybook had issues with jsx:react-jsx. But I will try to switch if jsx:react is no longer supported.