facebook/docusaurus · error · ReactContextError

Hook is called outside the <AnnouncementBarProvider>.

Error message

Hook is called outside the <AnnouncementBarProvider>. 

What it means

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.

Source

Thrown at packages/docusaurus-theme-common/src/contexts/announcementBar.tsx:114

      close: handleClose,
    }),
    [announcementBar, isClosed, handleClose],
  );
}

export function AnnouncementBarProvider({
  children,
}: {
  children: ReactNode;
}): ReactNode {
  const value = useContextValue();
  return <Context.Provider value={value}>{children}</Context.Provider>;
}

export function useAnnouncementBar(): ContextValue {
  const api = useContext(Context);
  if (!api) {
    throw new ReactContextError('AnnouncementBarProvider');
  }
  return api;
}

View on GitHub (pinned to 3f483e80e3)

Solutions

1. Ensure `<AnnouncementBarProvider>` remains an ancestor of every component calling `useAnnouncementBar()`.
2. If you swizzled the root layout, restore the provider wrapper around the same subtree as upstream.
3. Avoid rendering consumers into portals that leave the provider subtree, or move the provider above the portal target.

Example fix

// before — provider removed during swizzle
<Layout>{children}</Layout>
// after
<AnnouncementBarProvider>{children}</AnnouncementBarProvider>

import {useContext} from 'react';
import {Context} from '@docusaurus/theme-common/internal/announcementBar';
function useAnnouncementBarSafe() {
  const ctx = useContext(Context);
  if (!ctx) return null; // guard before consuming
  return ctx;
}

try {
  const api = useAnnouncementBar();
  // ...
} catch (e) {
  if (e instanceof Error && e.message.includes('AnnouncementBarProvider')) return null;
  throw e;
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• Hook is called outside the <ColorModeProvider>. Please see h
• Hook is called outside the <NavbarMobileSidebarProvider>.
• Hook is called outside the <NavbarSecondaryMenuContentProvid
• Hook is called outside the <NavbarSecondaryMenuDisplayProvid
• Hook is called outside the <CodeBlockContextProvider>.

AI-assisted analysis of facebook/docusaurus@3f483e80e3 (2026-08-12). Data as JSON: /api/errors/b0422052480b334c. Report an issue: GitHub.