{"record":{"id":"7126093a57c61cfd","repo":"hakimel/reveal.js","slug":"fragment-with-aschild-expects-exactly-one-react-el","errorCode":null,"errorMessage":"Fragment with asChild expects exactly one React element child.","messagePattern":"Fragment with asChild expects exactly one React element child\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"react/src/components/fragment.tsx","lineNumber":50,"sourceCode":"}\n\nexport function Fragment({\n\tanimation,\n\tindex,\n\tas,\n\tasChild,\n\tclassName,\n\tstyle,\n\tchildren,\n}: FragmentProps) {\n\tconst classes = mergeClassNames('fragment', animation, className);\n\n\tif (asChild) {\n\t\tlet child: ReactElement<FragmentChildProps>;\n\t\ttry {\n\t\t\tchild = Children.only(children) as ReactElement<FragmentChildProps>;\n\t\t} catch {\n\t\t\tthrow new Error('Fragment with asChild expects exactly one React element child.');\n\t\t}\n\n\t\tif (!isValidElement(child) || child.type === ReactFragment) {\n\t\t\tthrow new Error('Fragment with asChild expects exactly one non-Fragment React element child.');\n\t\t}\n\n\t\tconst fragmentChildProps: FragmentChildProps = {\n\t\t\tclassName: mergeClassNames(child.props.className, classes),\n\t\t\tstyle: mergeStyles(child.props.style, style),\n\t\t};\n\n\t\tif (index !== undefined) {\n\t\t\tfragmentChildProps['data-fragment-index'] = index;\n\t\t}\n\n\t\treturn cloneElement(child, fragmentChildProps);\n\t}\n","sourceCodeStart":32,"sourceCodeEnd":68,"githubUrl":"https://github.com/hakimel/reveal.js/blob/a3b940695648aa1c5b0680bc9a5b905cf43020e5/react/src/components/fragment.tsx#L32-L68","documentation":"When asChild is set, Fragment (react/src/components/fragment.tsx:45) clones a single child via Children.only (:48) to merge fragment className/style/data-fragment-index onto it. React's Children.only throws when children is not exactly one element (zero, more than one, an array, or a non-element). The wrapper catches that and re-throws with this clearer message, so the failure is about child cardinality, not validity.","triggerScenarios":"Rendering <Fragment asChild> with no children; with two or more sibling elements; with an array of children; with a conditional that evaluates to false/null/undefined; with a list.map() result producing multiple nodes; with a string or number as the sole child.","commonSituations":"Forgetting to pass a child when adopting asChild; wrapping a .map() that returns several fragments; conditional rendering ({cond && <X/>}) that yields false; migrating from a plain <span> wrapper to asChild and leaving multiple children inside.","solutions":["Pass exactly one React element as the child of <Fragment asChild>.","If you need multiple children, drop asChild and let Fragment render its default <span> wrapper, or wrap the children in a single host element first.","Replace conditional ({cond && <X/>}) with an explicit single element or render nothing at the parent level so the child count is always one.","Avoid passing strings/numbers as the asChild child — use a real element."],"exampleFix":"// before — zero or multiple children\n<Fragment asChild index={0}>\n  {items.map(i => <li key={i.id}>{i.label}</li>)}\n</Fragment>\n\n// after — exactly one element child (wrap the list)\n<Fragment asChild index={0}>\n  <ul>{items.map(i => <li key={i.id}>{i.label}</li>)}</ul>\n</Fragment>","handlingStrategy":"type-guard","validationCode":"import { Children, isValidElement } from 'react';\nfunction assertSingleChild(children) {\n  if (Children.count(children) !== 1 || !isValidElement(Children.only(children))) {\n    throw new Error('Fragment asChild requires exactly one React element child.');\n  }\n}","typeGuard":"import { Children, isValidElement, type ReactElement } from 'react';\nfunction isSingleElementChild(children): children is ReactElement {\n  return Children.count(children) === 1 && isValidElement(Children.toArray(children)[0]);\n}","tryCatchPattern":null,"preventionTips":["Always pass exactly one element to <Fragment asChild>.","Avoid .map() outputs or conditionals directly as the asChild child without a wrapping element.","If you need multiple nodes, drop asChild and let Fragment render its own wrapper."],"tags":["react","fragment","aschild","children","validation"],"backgroundTag":null,"analyzedSha":"a3b940695648aa1c5b0680bc9a5b905cf43020e5","analyzedAt":"2026-08-12T23:46:52.821Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}