{"record":{"id":"b0422052480b334c","repo":"facebook/docusaurus","slug":"hook-is-called-outside-the-announcementbarprovide","errorCode":null,"errorMessage":"Hook is called outside the <AnnouncementBarProvider>. ","messagePattern":"Hook is called outside the <AnnouncementBarProvider>\\. ","errorType":"exception","errorClass":"ReactContextError","httpStatus":null,"severity":"error","filePath":"packages/docusaurus-theme-common/src/contexts/announcementBar.tsx","lineNumber":114,"sourceCode":"      close: handleClose,\n    }),\n    [announcementBar, isClosed, handleClose],\n  );\n}\n\nexport function AnnouncementBarProvider({\n  children,\n}: {\n  children: ReactNode;\n}): ReactNode {\n  const value = useContextValue();\n  return <Context.Provider value={value}>{children}</Context.Provider>;\n}\n\nexport function useAnnouncementBar(): ContextValue {\n  const api = useContext(Context);\n  if (!api) {\n    throw new ReactContextError('AnnouncementBarProvider');\n  }\n  return api;\n}\n","sourceCodeStart":96,"sourceCodeEnd":118,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus-theme-common/src/contexts/announcementBar.tsx#L96-L118","documentation":"Thrown by `useAnnouncementBar()` when the React context it reads is `null`/undefined — i.e. the hook was called by a component rendered outside the `<AnnouncementBarProvider>`. The provider normally wraps the layout so any consumer beneath it has a value; consuming it elsewhere is a component-tree wiring error.","triggerScenarios":"Calling `useAnnouncementBar()` from a component that is rendered above the provider in the tree, or in a portal/overlay that escapes the provider subtree, or during SSR/initialization paths where the provider has not mounted.","commonSituations":"Swizzling the layout and accidentally removing or relocating `<AnnouncementBarProvider>`; rendering a component that consumes the hook into a separate React root (e.g. a modal portal outside the main tree); importing theme-common internals into a non-theme context.","solutions":["Ensure `<AnnouncementBarProvider>` remains an ancestor of every component calling `useAnnouncementBar()`.","If you swizzled the root layout, restore the provider wrapper around the same subtree as upstream.","Avoid rendering consumers into portals that leave the provider subtree, or move the provider above the portal target."],"exampleFix":"// before — provider removed during swizzle\n<Layout>{children}</Layout>\n// after\n<AnnouncementBarProvider>{children}</AnnouncementBarProvider>","handlingStrategy":"validation","validationCode":"import {useContext} from 'react';\nimport {Context} from '@docusaurus/theme-common/internal/announcementBar';\nfunction useAnnouncementBarSafe() {\n  const ctx = useContext(Context);\n  if (!ctx) return null; // guard before consuming\n  return ctx;\n}","typeGuard":null,"tryCatchPattern":"try {\n  const api = useAnnouncementBar();\n  // ...\n} catch (e) {\n  if (e instanceof Error && e.message.includes('AnnouncementBarProvider')) return null;\n  throw e;\n}","preventionTips":["Keep `<AnnouncementBarProvider>` in the swizzled layout subtree.","Wrap isolated test renders with the provider.","Avoid portals that escape the provider subtree."],"tags":["react","context","announcement-bar","theme-common"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}