{"record":{"id":"64f7970bc74ec6aa","repo":"appsmithorg/appsmith","slug":"usesidebar-must-be-used-within-a-sidebarprovider","errorCode":null,"errorMessage":"useSidebar must be used within a SidebarProvider.","messagePattern":"useSidebar must be used within a SidebarProvider\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"app/client/packages/design-system/widgets/src/components/Sidebar/src/use-sidebar.ts","lineNumber":8,"sourceCode":"import * as React from \"react\";\nimport { SidebarContext } from \"./context\";\n\nexport function useSidebar() {\n  const context = React.useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n}\n","sourceCodeStart":1,"sourceCodeEnd":13,"githubUrl":"https://github.com/appsmithorg/appsmith/blob/8cd9021c24cdbea1c3c12c966073708e83db60c2/app/client/packages/design-system/widgets/src/components/Sidebar/src/use-sidebar.ts#L1-L13","documentation":"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.","triggerScenarios":"Calling useSidebar() (directly or via a Sidebar subcomponent that consumes it) in a component tree that has no <SidebarProvider> above it.","commonSituations":"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.","solutions":["Wrap the tree (or at least the sidebar subtree) in <SidebarProvider> so the context is populated.","In tests/stories, render the consumer inside <SidebarProvider> rather than shallow-rendering it alone.","If you only need sidebar state in a sub-section, scope the provider to that section but ensure every useSidebar caller is below it.","Check component documentation for the required provider and add it at the shared layout root."],"exampleFix":"// before\nfunction MyNav() {\n  const { state } = useSidebar(); // throws\n  return <nav />;\n}\n<MyNav />\n\n// after\n<SidebarProvider>\n  <MyNav />\n</SidebarProvider>","handlingStrategy":"validation","validationCode":"import { SidebarContext } from './context';\n// in a component:\nif (React.useContext(SidebarContext) == null) {\n  throw new Error('Render this inside <SidebarProvider>.');\n}","typeGuard":"function isInsideSidebarProvider(ctx: unknown): ctx is NonNullable<typeof ctx> {\n  return ctx != null;\n}","tryCatchPattern":"try { return <SidebarConsumer />; } catch (e) {\n  if (/useSidebar must be used within a SidebarProvider/i.test(e.message))\n    return <SidebarProvider><SidebarConsumer /></SidebarProvider>;\n  throw e;\n}","preventionTips":["Establish the provider at a shared layout root so all consumers are covered.","In stories/tests, render consumers inside <SidebarProvider> rather than in isolation.","Document the provider requirement on the hook."],"tags":["react","design-system","context","sidebar","compound-components"],"backgroundTag":null,"analyzedSha":"8cd9021c24cdbea1c3c12c966073708e83db60c2","analyzedAt":"2026-08-12T22:14:19.293Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}