facebook/docusaurus · error · Error

Docusaurus error: the <Tabs> component requires at least one

Error message

Docusaurus error: the <Tabs> component requires at least one <TabItem> children component

What it means

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.

Source

Thrown at packages/docusaurus-theme-common/src/utils/tabsUtils.tsx:137

function isValidValue({
  value,
  tabValues,
}: {
  value: string | null | undefined;
  tabValues: readonly TabValue[];
}) {
  return tabValues.some((a) => a.value === value);
}

function getInitialStateValue({
  defaultValue,
  tabValues,
}: {
  defaultValue: TabsProps['defaultValue'];
  tabValues: readonly TabValue[];
}): string {
  if (tabValues.length === 0) {
    throw new Error(
      'Docusaurus error: the <Tabs> component requires at least one <TabItem> children component',
    );
  }
  if (defaultValue) {
    // Warn user about passing incorrect defaultValue as prop.
    if (!isValidValue({value: defaultValue, tabValues})) {
      throw new Error(
        `Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${tabValues
          .map((a) => a.value)
          .join(
            ', ',
          )}. If you intend to show no default tab, use defaultValue={null} instead.`,
      );
    }
    return defaultValue;
  }
  const defaultTabValue =
    tabValues.find((tabValue) => tabValue.default) ?? tabValues[0];

View on GitHub (pinned to 3f483e80e3)

Solutions

1. Add at least one `<TabItem value="...">` child (or a non-empty `values` array).
2. If tabs are generated dynamically, guard with `{items.length > 0 && <Tabs>...}` so empty lists skip the component.
3. Provide a fallback `defaultValue={null}` only after ensuring at least one tab exists.

Example fix

// before
<Tabs>{items.map(i => <TabItem key={i.id} value={i.id}>{i.body}</TabItem>)}</Tabs>
// items may be empty → throws
// after
{items.length > 0 && (
  <Tabs>{items.map(i => <TabItem key={i.id} value={i.id}>{i.body}</TabItem>)}</Tabs>
)}

function hasAtLeastOneTab(values: readonly unknown[] | undefined, children: unknown): boolean {
  return (values?.length ?? 0) > 0 || React.Children.count(children) > 0;
}
// only render <Tabs> when true

function tabsHasContent(props: {values?: unknown[]; children?: unknown}): boolean {
  return (props.values?.length ?? 0) > 0 || React.Children.count(props.children) > 0;
}

When it happens

Trigger: 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.

Common situations: Empty placeholder `<Tabs>` left in MDX; dynamically generated children where the source list is empty; conditional rendering that yields zero TabItems; passing `values={[]}`.

Related errors

• Docusaurus error: Bad <Tabs> child <${badChildTypeName}>: al
• Docusaurus error: Duplicate values "${dup.map((a) => `'${a.v
• A highlight range has been given in code block's metastring
• Docusaurus error: The <Tabs> has a defaultValue "${defaultVa
• Invalid command: ${command}

AI-assisted analysis of facebook/docusaurus@3f483e80e3 (2026-08-12). Data as JSON: /api/errors/d97414aa46f918be. Report an issue: GitHub.