microsoft / microsoft/TypeScript
This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided
Personne n'a encore pris cette issue.
- Langage dominant
- Go
- Étoiles
- 111k
- Forks
- 14.3k
- Merge moyen
- 2 j 4 h
- PR mergées (30 j)
- 132
Description
### 🔎 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
```tsx
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(a string);
function StringChildren({ children }: { children: string }) {
return children;
}
// Works fine without children
console.log();
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(
// 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
| 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:
```ts
// 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 https://github.com/microsoft/TypeScript/issues/60572, however the suggested workaround in that issue is not working.
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par la reproduction minimale dans le Playground ou le dépôt lié, puis lisez le chemin de vérification des children JSX dans src/compiler/checker.ts, autour de la vérification de getIndexedAccessType vers la ligne 21585. Vérifiez le comportement avec l’exemple StringChildren fourni et les définitions de types associées de React 19 ; c’est terminé lorsque l’enfant unique valide de type chaîne n’émet plus ts(2745).
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- typescript
- Domaine
- compilers
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Clairement spécifiée
- Accessibilité débutants
- 45/100