{"record":{"id":"d97414aa46f918be","repo":"facebook/docusaurus","slug":"docusaurus-error-the-tabs-component-requires-at","errorCode":null,"errorMessage":"Docusaurus error: the <Tabs> component requires at least one <TabItem> children component","messagePattern":"Docusaurus error: the <Tabs> component requires at least one <TabItem> children component","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/docusaurus-theme-common/src/utils/tabsUtils.tsx","lineNumber":137,"sourceCode":"function isValidValue({\n  value,\n  tabValues,\n}: {\n  value: string | null | undefined;\n  tabValues: readonly TabValue[];\n}) {\n  return tabValues.some((a) => a.value === value);\n}\n\nfunction getInitialStateValue({\n  defaultValue,\n  tabValues,\n}: {\n  defaultValue: TabsProps['defaultValue'];\n  tabValues: readonly TabValue[];\n}): string {\n  if (tabValues.length === 0) {\n    throw new Error(\n      'Docusaurus error: the <Tabs> component requires at least one <TabItem> children component',\n    );\n  }\n  if (defaultValue) {\n    // Warn user about passing incorrect defaultValue as prop.\n    if (!isValidValue({value: defaultValue, tabValues})) {\n      throw new Error(\n        `Docusaurus error: The <Tabs> has a defaultValue \"${defaultValue}\" but none of its children has the corresponding value. Available values are: ${tabValues\n          .map((a) => a.value)\n          .join(\n            ', ',\n          )}. If you intend to show no default tab, use defaultValue={null} instead.`,\n      );\n    }\n    return defaultValue;\n  }\n  const defaultTabValue =\n    tabValues.find((tabValue) => tabValue.default) ?? tabValues[0];","sourceCodeStart":119,"sourceCodeEnd":155,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx#L119-L155","documentation":"Thrown by `getInitialStateValue` when `useTabValues` resolves to an empty array — i.e. the `<Tabs>` component has no usable `<TabItem>` children and no `values` prop. Tabs needs at least one tab to compute an initial selection.","triggerScenarios":"Authoring `<Tabs></Tabs>` with no children, or with children that are all filtered out (none are valid `TabItem`s with `value`). Also possible when `values={[]}` is passed explicitly.","commonSituations":"Empty placeholder `<Tabs>` left in MDX; dynamically generated children where the source list is empty; conditional rendering that yields zero TabItems; passing `values={[]}`.","solutions":["Add at least one `<TabItem value=\"...\">` child (or a non-empty `values` array).","If tabs are generated dynamically, guard with `{items.length > 0 && <Tabs>...}` so empty lists skip the component.","Provide a fallback `defaultValue={null}` only after ensuring at least one tab exists."],"exampleFix":"// before\n<Tabs>{items.map(i => <TabItem key={i.id} value={i.id}>{i.body}</TabItem>)}</Tabs>\n// items may be empty → throws\n// after\n{items.length > 0 && (\n  <Tabs>{items.map(i => <TabItem key={i.id} value={i.id}>{i.body}</TabItem>)}</Tabs>\n)}","handlingStrategy":"validation","validationCode":"function hasAtLeastOneTab(values: readonly unknown[] | undefined, children: unknown): boolean {\n  return (values?.length ?? 0) > 0 || React.Children.count(children) > 0;\n}\n// only render <Tabs> when true","typeGuard":"function tabsHasContent(props: {values?: unknown[]; children?: unknown}): boolean {\n  return (props.values?.length ?? 0) > 0 || React.Children.count(props.children) > 0;\n}","tryCatchPattern":null,"preventionTips":["Guard dynamically-built `<Tabs>` with a non-empty check.","Never author empty `<Tabs>` in MDX.","Add a CI lint that flags `<Tabs>` with no TabItem children."],"tags":["mdx","tabs","validation","theme-common"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}