{"record":{"id":"792de2681da34f36","repo":"facebook/docusaurus","slug":"docusaurus-error-bad-tabs-child-badchildtype","errorCode":null,"errorMessage":"Docusaurus error: Bad <Tabs> child <${badChildTypeName}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique \"value\" prop.\nIf you do not want to pass on a \"value\" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.","messagePattern":"Docusaurus error: Bad <Tabs> child <(.+?)>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique \"value\" prop\\.\nIf you do not want to pass on a \"value\" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values=(.+?)> prop\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/docusaurus-theme-common/src/utils/tabsUtils.tsx","lineNumber":81,"sourceCode":"  ): comp is ReactElement<TabItemProps> {\n    const {props} = comp;\n    return !!props && typeof props === 'object' && 'value' in props;\n  }\n\n  const elements = React.Children.toArray(children).flatMap((child) => {\n    // Historical case, not sure when it happens, do we really need this?\n    if (!child) {\n      return [];\n    }\n    if (isValidElement(child) && isTabItemWithValueProp(child)) {\n      return [child];\n    }\n    // child.type.name will give non-sensical values in prod because of\n    // minification, but we assume it won't throw in prod.\n    const badChildTypeName =\n      // @ts-expect-error: guarding against unexpected cases\n      typeof child.type === 'string' ? child.type : child.type.name;\n    throw new Error(\n      `Docusaurus error: Bad <Tabs> child <${badChildTypeName}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique \"value\" prop.\nIf you do not want to pass on a \"value\" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`,\n    );\n  });\n\n  return elements.map(\n    ({props: {value, label, attributes, default: isDefault}}) => ({\n      value,\n      label,\n      attributes,\n      default: isDefault,\n    }),\n  );\n}\n\nfunction ensureNoDuplicateValue(values: readonly TabValue[]) {\n  const dup = duplicates(values, (a, b) => a.value === b.value);\n  if (dup.length > 0) {","sourceCodeStart":63,"sourceCodeEnd":99,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx#L63-L99","documentation":"Thrown by the `<Tabs>` utility when one of its direct children is not a `<TabItem>` with a `value` prop. `Tabs` requires every child to be a `TabItem` (or to be recognizable as one) so it can build the tab list; any other element type is treated as a markup mistake.","triggerScenarios":"Authoring MDX/JSX where `<Tabs>` wraps a `<div>`, plain text, `<p>`, or a `<TabItem>` that is missing its `value` prop. The bad child's type name is interpolated into the message (note: minified prod builds may show a mangled name).","commonSituations":"Forgetting `value` on a `TabItem`; wrapping helper elements (e.g. a heading) directly inside `<Tabs>`; copy-pasting tab markup that lost its props; MDX auto-wrapping stray text into a `<p>` inside Tabs.","solutions":["Ensure every direct child of `<Tabs>` is a `<TabItem value=\"...\">`.","If you need non-tab scaffolding, move it outside `<Tabs>` or pass `values={[...]}` and render per-tab content via the values map.","Re-check that no MDX implicit element (e.g. blank lines becoming `<p>`) slipped between TabItems."],"exampleFix":"// before\n<Tabs>\n  <p>Pick one:</p>\n  <TabItem label=\"A\">A</TabItem>\n</Tabs>\n// after\n<p>Pick one:</p>\n<Tabs>\n  <TabItem value=\"a\" label=\"A\">A</TabItem>\n</Tabs>","handlingStrategy":"type-guard","validationCode":"import {isValidElement} from 'react';\nfunction isTabItemWithValue(child: any): boolean {\n  return isValidElement(child) && child.type && (child.type as any).name === 'TabItem' && 'value' in (child.props ?? {});\n}","typeGuard":"function isTabItemWithValueProp(child: unknown): child is React.ReactElement<{value: string}> {\n  return React.isValidElement(child) && (child.type as any)?.name === 'TabItem' && typeof (child.props as any)?.value === 'string';\n}","tryCatchPattern":null,"preventionTips":["Make every direct child of `<Tabs>` a `<TabItem value=\"...\">`.","Validate Tab children in a custom wrapper before rendering.","Avoid stray text/elements that MDX may wrap in `<p>` inside Tabs."],"tags":["mdx","tabs","validation","theme-common"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}