facebook/docusaurus · error · Error

Docusaurus error: Duplicate values "${dup.map((a) => `'${a.v

Error message

Docusaurus error: Duplicate values "${dup.map((a) => `'${a.value}'`).join(', ')}" found in <Tabs>. Every value needs to be unique.

What it means

Thrown by `ensureNoDuplicateValue` when two or more `<TabItem>` children (or entries in the `values` prop) share the same `value`. `value` is the tab identity used for state persistence and URL syncing, so duplicates are ambiguous and rejected.

Source

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

      `Docusaurus error: Bad <Tabs> child <${badChildTypeName}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.
If 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.`,
    );
  });

  return elements.map(
    ({props: {value, label, attributes, default: isDefault}}) => ({
      value,
      label,
      attributes,
      default: isDefault,
    }),
  );
}

function ensureNoDuplicateValue(values: readonly TabValue[]) {
  const dup = duplicates(values, (a, b) => a.value === b.value);
  if (dup.length > 0) {
    throw new Error(
      `Docusaurus error: Duplicate values "${dup
        .map((a) => `'${a.value}'`)
        .join(', ')}" found in <Tabs>. Every value needs to be unique.`,
    );
  }
}

function useTabValues(
  props: Pick<TabsProps, 'values' | 'children'>,
): readonly TabValue[] {
  const {values: valuesProp, children} = props;
  return useMemo(() => {
    const values = valuesProp ?? extractChildrenTabValues(children);
    ensureNoDuplicateValue(values);
    return values;
  }, [valuesProp, children]);
}

View on GitHub (pinned to 3f483e80e3)

Solutions

1. Make every `TabItem` `value` unique within its `<Tabs>` (the error lists the offenders).
2. If two tabs legitimately share a label, give them distinct `value`s (e.g. `'tab-a'`, `'tab-b'`) and reuse `label`.
3. Lint your MDX tab usage in CI to catch duplicate values.

Example fix

// before
<Tabs>
  <TabItem value="x" label="A">A</TabItem>
  <TabItem value="x" label="B">B</TabItem>
</Tabs>
// after
<Tabs>
  <TabItem value="a" label="A">A</TabItem>
  <TabItem value="b" label="B">B</TabItem>
</Tabs>

function findDuplicateTabValues(items: {value: string}[]): string[] {
  const seen = new Set<string>(), dups = new Set<string>();
  for (const i of items) (seen.has(i.value) ? dups : seen).add(i.value);
  return [...dups];
}

function hasUniqueTabValues(items: {value: string}[]): boolean {
  return new Set(items.map(i => i.value)).size === items.length;
}

When it happens

Trigger: Authoring `<Tabs>` with multiple `<TabItem value="x">` entries, or a `values={[{value:'x'},{value:'x'}]}` array with repeats. The duplicated values are listed in the message.

Common situations: Copy-pasting TabItems without changing `value`; using the same `value` across tabs in different languages by mistake; refactoring tabs and forgetting to unique the keys.

Related errors

• Docusaurus error: Bad <Tabs> child <${badChildTypeName}>: al
• Docusaurus error: the <Tabs> component requires at least one
• 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/dae5f40af9136d9d. Report an issue: GitHub.