{"record":{"id":"88f596105218f09b","repo":"facebook/docusaurus","slug":"hook-is-called-outside-the-navbarsecondarymenucon","errorCode":null,"errorMessage":"Hook is called outside the <NavbarSecondaryMenuContentProvider>. ","messagePattern":"Hook is called outside the <NavbarSecondaryMenuContentProvider>\\. ","errorType":"exception","errorClass":"ReactContextError","httpStatus":null,"severity":"error","filePath":"packages/docusaurus-theme-common/src/contexts/navbarSecondaryMenu/content.tsx","lineNumber":58,"sourceCode":"\n/** @internal */\nexport function NavbarSecondaryMenuContentProvider({\n  children,\n}: {\n  children: ReactNode;\n}): ReactNode {\n  const value = useState({component: null, props: null});\n  return (\n    // @ts-expect-error: this context is hard to type\n    <Context.Provider value={value}>{children}</Context.Provider>\n  );\n}\n\n/** @internal */\nexport function useNavbarSecondaryMenuContent(): Content {\n  const value = useContext(Context);\n  if (!value) {\n    throw new ReactContextError('NavbarSecondaryMenuContentProvider');\n  }\n  return value[0];\n}\n\n/**\n * This component renders nothing by itself, but it fills the placeholder in the\n * generic secondary menu layout. This reduces coupling between the main layout\n * and the specific page.\n *\n * This kind of feature is often called portal/teleport/gateway/outlet...\n * Various unmaintained React libs exist. Most up-to-date one:\n * https://github.com/gregberge/react-teleporter\n * Not sure any of those is safe regarding concurrent mode.\n */\nexport function NavbarSecondaryMenuFiller<P extends object>({\n  component,\n  props,\n}: {","sourceCodeStart":40,"sourceCodeEnd":76,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus-theme-common/src/contexts/navbarSecondaryMenu/content.tsx#L40-L76","documentation":"Thrown by `useNavbarSecondaryMenuContent()` when its context value is falsy, meaning the hook was called outside `<NavbarSecondaryMenuContentProvider>`. The provider holds the teleport/portal state that lets page components fill the mobile secondary menu.","triggerScenarios":"A component (typically a `NavbarSecondaryMenuFiller`) reads the secondary-menu content context from outside the provider. The provider normally sits in the navbar/layout; consumers must be descendants.","commonSituations":"Swizzling the layout and dropping the provider; rendering a secondary-menu filler component in isolation/tests without the provider; moving the secondary menu into a portal that escapes the provider subtree.","solutions":["Ensure `<NavbarSecondaryMenuContentProvider>` wraps the subtree that uses `NavbarSecondaryMenuFiller` / `useNavbarSecondaryMenuContent`.","Wrap test renders of those components with the provider.","Restore the provider in any swizzled layout."],"exampleFix":"// before\n<NavbarSecondaryMenuFiller component={MyComp} props={{}} />\n// after\n<NavbarSecondaryMenuContentProvider>\n  <NavbarSecondaryMenuFiller component={MyComp} props={{}} />\n</NavbarSecondaryMenuContentProvider>","handlingStrategy":"validation","validationCode":"import {useContext} from 'react';\nimport {Context} from '@docusaurus/theme-common/internal/navbarSecondaryMenu/content';\nfunction useSecondaryMenuContentSafe() {\n  const v = useContext(Context);\n  return v ?? null;\n}","typeGuard":null,"tryCatchPattern":"try {\n  const content = useNavbarSecondaryMenuContent();\n} catch (e) {\n  if (e instanceof Error && e.message.includes('NavbarSecondaryMenuContentProvider')) return null;\n  throw e;\n}","preventionTips":["Keep `<NavbarSecondaryMenuContentProvider>` over the filler subtree.","Wrap tests with the provider.","Restore the provider after swizzling."],"tags":["react","context","navbar","secondary-menu","theme-common"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}