{"record":{"id":"659831314d499488","repo":"facebook/docusaurus","slug":"hook-is-called-outside-the-navbarmobilesidebarpro","errorCode":null,"errorMessage":"Hook is called outside the <NavbarMobileSidebarProvider>. ","messagePattern":"Hook is called outside the <NavbarMobileSidebarProvider>\\. ","errorType":"exception","errorClass":"ReactContextError","httpStatus":null,"severity":"error","filePath":"packages/docusaurus-theme-common/src/contexts/navbarMobileSidebar.tsx","lineNumber":116,"sourceCode":"          <OnHistoryPop\n            handler={() => {\n              value.toggle();\n              // Prevent pop navigation; seems desirable enough\n              // See https://github.com/facebook/docusaurus/pull/5462#issuecomment-911699846\n              return false;\n            }}\n          />\n        )\n      }\n      <Context.Provider value={value}>{children}</Context.Provider>\n    </>\n  );\n}\n\nexport function useNavbarMobileSidebar(): ContextValue {\n  const context = React.useContext(Context);\n  if (context === undefined) {\n    throw new ReactContextError('NavbarMobileSidebarProvider');\n  }\n  return context;\n}\n","sourceCodeStart":98,"sourceCodeEnd":120,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus-theme-common/src/contexts/navbarMobileSidebar.tsx#L98-L120","documentation":"Thrown by `useNavbarMobileSidebar()` when its context is `undefined`, i.e. the hook was called outside `<NavbarMobileSidebarProvider>`. The provider wraps the mobile navbar region; consumers (toggle button, sidebar panel) must live inside it.","triggerScenarios":"A component reading mobile-sidebar state is rendered outside the provider subtree, or the provider was removed/relocated during swizzling of the navbar layout.","commonSituations":"Swizzling `Navbar` / `Layout` and dropping the provider; moving the mobile toggle into a portal that escapes the provider; isolated unit tests of the toggle without the provider wrapper.","solutions":["Keep `<NavbarMobileSidebarProvider>` as an ancestor of the mobile toggle and sidebar panel.","In tests, wrap the component with the provider.","Diff your swizzled layout against upstream after upgrades."],"exampleFix":"// before\n<NavbarMobileSidebarToggle />\n// after\n<NavbarMobileSidebarProvider>\n  <NavbarMobileSidebarToggle />\n</NavbarMobileSidebarProvider>","handlingStrategy":"validation","validationCode":"import {useContext} from 'react';\nimport {Context} from '@docusaurus/theme-common/internal/navbarMobileSidebar';\nfunction useNavbarMobileSidebarSafe() {\n  return useContext(Context); // undefined when outside provider\n}","typeGuard":null,"tryCatchPattern":"try {\n  const sidebar = useNavbarMobileSidebar();\n} catch (e) {\n  if (e instanceof Error && e.message.includes('NavbarMobileSidebarProvider')) return null;\n  throw e;\n}","preventionTips":["Mount `<NavbarMobileSidebarProvider>` above the mobile toggle/panel.","Wrap test renders with the provider.","Diff swizzled navbar layouts against upstream."],"tags":["react","context","navbar","mobile-sidebar","theme-common"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}