appsmithorg/appsmith · error · Error

useSidebar must be used within a SidebarProvider.

Error message

useSidebar must be used within a SidebarProvider.

What it means

Thrown by useSidebar() in the design-system Sidebar widget. It reads SidebarContext via React.useContext; the context default is null/undefined, so consuming the hook without a <SidebarProvider> ancestor yields a falsy value and the hook throws. This is the canonical 'hook used outside its provider' guard and, unlike FormControl, it is correctly implemented.

Source

Thrown at app/client/packages/design-system/widgets/src/components/Sidebar/src/use-sidebar.ts:8

import * as React from "react";
import { SidebarContext } from "./context";

export function useSidebar() {
  const context = React.useContext(SidebarContext);

  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.");
  }

  return context;
}

View on GitHub (pinned to 8cd9021c24)

Solutions

1. Wrap the tree (or at least the sidebar subtree) in <SidebarProvider> so the context is populated.
2. In tests/stories, render the consumer inside <SidebarProvider> rather than shallow-rendering it alone.
3. If you only need sidebar state in a sub-section, scope the provider to that section but ensure every useSidebar caller is below it.
4. Check component documentation for the required provider and add it at the shared layout root.

Example fix

// before
function MyNav() {
  const { state } = useSidebar(); // throws
  return <nav />;
}
<MyNav />

// after
<SidebarProvider>
  <MyNav />
</SidebarProvider>

import { SidebarContext } from './context';
// in a component:
if (React.useContext(SidebarContext) == null) {
  throw new Error('Render this inside <SidebarProvider>.');
}

function isInsideSidebarProvider(ctx: unknown): ctx is NonNullable<typeof ctx> {
  return ctx != null;
}

try { return <SidebarConsumer />; } catch (e) {
  if (/useSidebar must be used within a SidebarProvider/i.test(e.message))
    return <SidebarProvider><SidebarConsumer /></SidebarProvider>;
  throw e;
}

When it happens

Trigger: Calling useSidebar() (directly or via a Sidebar subcomponent that consumes it) in a component tree that has no <SidebarProvider> above it.

Common situations: Rendering a Sidebar subcomponent in isolation in a Storybook story or test without the provider; refactoring and moving a consumer above the provider; mounting only part of the widget tree in a micro-frontend.

Related errors

• FormControl compound components cannot be rendered outside t
• Missing basePageId. If you are trying to set href inside a r
• error

AI-assisted analysis of appsmithorg/appsmith@8cd9021c24 (2026-08-12). Data as JSON: /api/errors/64f7970bc74ec6aa. Report an issue: GitHub.