facebook/docusaurus · error · ReactContextError

Hook is called outside the <NavbarMobileSidebarProvider>.

Error message

Hook is called outside the <NavbarMobileSidebarProvider>. 

What it means

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.

Source

Thrown at packages/docusaurus-theme-common/src/contexts/navbarMobileSidebar.tsx:116

          <OnHistoryPop
            handler={() => {
              value.toggle();
              // Prevent pop navigation; seems desirable enough
              // See https://github.com/facebook/docusaurus/pull/5462#issuecomment-911699846
              return false;
            }}
          />
        )
      }
      <Context.Provider value={value}>{children}</Context.Provider>
    </>
  );
}

export function useNavbarMobileSidebar(): ContextValue {
  const context = React.useContext(Context);
  if (context === undefined) {
    throw new ReactContextError('NavbarMobileSidebarProvider');
  }
  return context;
}

View on GitHub (pinned to 3f483e80e3)

Solutions

1. Keep `<NavbarMobileSidebarProvider>` as an ancestor of the mobile toggle and sidebar panel.
2. In tests, wrap the component with the provider.
3. Diff your swizzled layout against upstream after upgrades.

Example fix

// before
<NavbarMobileSidebarToggle />
// after
<NavbarMobileSidebarProvider>
  <NavbarMobileSidebarToggle />
</NavbarMobileSidebarProvider>

import {useContext} from 'react';
import {Context} from '@docusaurus/theme-common/internal/navbarMobileSidebar';
function useNavbarMobileSidebarSafe() {
  return useContext(Context); // undefined when outside provider
}

try {
  const sidebar = useNavbarMobileSidebar();
} catch (e) {
  if (e instanceof Error && e.message.includes('NavbarMobileSidebarProvider')) return null;
  throw e;
}

When it happens

Trigger: A component reading mobile-sidebar state is rendered outside the provider subtree, or the provider was removed/relocated during swizzling of the navbar layout.

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

Related errors

• Hook is called outside the <NavbarSecondaryMenuContentProvid
• Hook is called outside the <NavbarSecondaryMenuDisplayProvid
• Hook is called outside the <ScrollControllerProvider>.
• Hook is called outside the <AnnouncementBarProvider>.
• Hook is called outside the <ColorModeProvider>. Please see h

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