{"record":{"id":"50efa7eabc87af8d","repo":"facebook/docusaurus","slug":"docusaurus-error-the-tabs-component-groupid-pro","errorCode":null,"errorMessage":"Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString=\"my-search-param\".","messagePattern":"Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name\\. You can also provide an explicit value such as queryString=\"my-search-param\"\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/docusaurus-theme-common/src/utils/tabsUtils.tsx","lineNumber":180,"sourceCode":"function getStorageKey(groupId: string | undefined) {\n  if (!groupId) {\n    return null;\n  }\n  return `docusaurus.tab.${groupId}`;\n}\n\nfunction getQueryStringKey({\n  queryString = false,\n  groupId,\n}: Pick<TabsProps, 'queryString' | 'groupId'>) {\n  if (typeof queryString === 'string') {\n    return queryString;\n  }\n  if (queryString === false) {\n    return null;\n  }\n  if (queryString === true && !groupId) {\n    throw new Error(\n      `Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString=\"my-search-param\".`,\n    );\n  }\n  return groupId ?? null;\n}\n\nfunction useTabQueryString({\n  queryString = false,\n  groupId,\n}: Pick<TabsProps, 'queryString' | 'groupId'>) {\n  const history = useHistory();\n  const key = getQueryStringKey({queryString, groupId});\n  const value = useQueryStringValue(key);\n\n  const setValue = useCallback(\n    (newValue: string) => {\n      if (!key) {\n        return; // no-op","sourceCodeStart":162,"sourceCodeEnd":198,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx#L162-L198","documentation":"When queryString is the boolean true, Docusaurus uses the Tabs groupId as the URL search-param name to persist the selected tab in the URL. getQueryStringKey throws if queryString===true and groupId is missing, because there is no name to use for the param. Supply either a groupId or an explicit queryString string instead.","triggerScenarios":"Render <Tabs queryString> (shorthand for queryString={true}) without a groupId prop; copy a groupId-style tab but delete the groupId; enable queryString in a shared Tabs wrapper that does not forward groupId.","commonSituations":"Wanting URL-synced tab selection but forgetting groupId; migrating a tab to queryString support incompletely; reusable Tabs wrapper components that conditionally set queryString but not groupId.","solutions":["Add a unique groupId prop, e.g. <Tabs queryString groupId=\"os\">.","Provide an explicit search-param name as a string: <Tabs queryString=\"operating-system\">.","Drop queryString if URL persistence is not needed."],"exampleFix":"// before\n<Tabs queryString>\n  <TabItem value=\"win\">Windows</TabItem>\n  <TabItem value=\"mac\">macOS</TabItem>\n</Tabs>\n// after\n<Tabs queryString groupId=\"os\">\n  <TabItem value=\"win\">Windows</TabItem>\n  <TabItem value=\"mac\">macOS</TabItem>\n</Tabs>","handlingStrategy":"validation","validationCode":"function assertQueryStringConfig(p: {\n  queryString?: boolean | string;\n  groupId?: string;\n}) {\n  if (p.queryString === true && !p.groupId) {\n    throw new Error(\n      'queryString=true requires a groupId (or pass an explicit queryString string).',\n    );\n  }\n}","typeGuard":"const hasValidQueryStringConfig = (p: {\n  queryString?: boolean | string;\n  groupId?: string;\n}): boolean =>\n  p.queryString !== true || typeof p.groupId === 'string';","tryCatchPattern":null,"preventionTips":["Always pair queryString with groupId in shared Tabs wrappers.","Prefer the explicit form queryString=\"my-param\" for self-documenting URLs.","Add a unit test on shared Tabs wrappers asserting queryString implies groupId."],"tags":["tabs","querystring","props-validation"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}