{"record":{"id":"bd9dfc322bbabadc","repo":"facebook/docusaurus","slug":"docusaurus-error-the-tabs-has-a-defaultvalue","errorCode":null,"errorMessage":"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.","messagePattern":"Docusaurus error: The <Tabs> has a defaultValue \"(.+?)\" but none of its children has the corresponding value\\. Available values are: (.+?)\\. If you intend to show no default tab, use defaultValue=(.+?) instead\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/docusaurus-theme-common/src/utils/tabsUtils.tsx","lineNumber":144,"sourceCode":"  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];\n  if (!defaultTabValue) {\n    throw new Error('Unexpected error: 0 tabValues');\n  }\n  return defaultTabValue.value;\n}\n\nfunction getStorageKey(groupId: string | undefined) {","sourceCodeStart":126,"sourceCodeEnd":162,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx#L126-L162","documentation":"The <Tabs> component validates that its defaultValue prop matches the value of one of its <TabItem> children (or entries in the values prop). This check runs inside getInitialStateValue at initial state computation; when defaultValue is truthy but no tab has that value, Docusaurus throws rather than silently render a non-existent tab. Use defaultValue={null} if you intentionally want no preselected tab.","triggerScenarios":"Render <Tabs defaultValue=\"apple\"> whose <TabItem> children only have value=\"app\"; pass a values={[{value:'a'},{value:'b'}]} array with defaultValue=\"c\"; or hardcode a defaultValue after renaming a tab value.","commonSituations":"Renaming a TabItem value prop and forgetting to update defaultValue; copy-pasting a Tabs block and editing only some values; generating tab values dynamically while defaultValue stays hardcoded; refactoring MDX where defaultValue referenced a now-removed tab.","solutions":["Set defaultValue to a value that exists on a <TabItem> (or in the values array). The error message lists all valid values.","Remove the defaultValue prop entirely to fall back to the first tab, or the one whose <TabItem default> is set.","Pass defaultValue={null} if you intentionally want no tab preselected."],"exampleFix":"// before\n<Tabs defaultValue=\"apple\">\n  <TabItem value=\"app\">App</TabItem>\n  <TabItem value=\"orange\">Orange</TabItem>\n</Tabs>\n// after\n<Tabs defaultValue=\"app\">\n  <TabItem value=\"app\">App</TabItem>\n  <TabItem value=\"orange\">Orange</TabItem>\n</Tabs>","handlingStrategy":"validation","validationCode":"import type {TabsProps} from '@docusaurus/theme-common/internal';\n\nfunction assertDefaultValueValid(\n  defaultValue: TabsProps['defaultValue'],\n  tabValues: readonly {value: string}[],\n) {\n  if (\n    defaultValue &&\n    !tabValues.some((t) => t.value === defaultValue)\n  ) {\n    throw new Error(\n      `defaultValue '${defaultValue}' is not one of [${tabValues\n        .map((t) => t.value)\n        .join(', ')}]`,\n    );\n  }\n}","typeGuard":"const isKnownTabValue = (\n  v: string | null | undefined,\n  tabValues: readonly {value: string}[],\n): v is string =>\n  v != null && tabValues.some((t) => t.value === v);","tryCatchPattern":null,"preventionTips":["Keep defaultValue in the same edit unit as the TabItem values so renames update both.","When generating values dynamically, derive defaultValue from tabValues[0].value instead of a literal.","Lint MDX for defaultValue props that do not appear in any value prop."],"tags":["tabs","react","props-validation","mdx"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}