{"record":{"id":"b22530131220a0e0","repo":"mastra-ai/mastra","slug":"usemainsidebar-must-be-used-within-a-mainsidebarpr","errorCode":null,"errorMessage":"useMainSidebar must be used within a MainSidebarProvider.","messagePattern":"useMainSidebar must be used within a MainSidebarProvider\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/playground-ui/src/ds/components/MainSidebar/main-sidebar-context.ts","lineNumber":47,"sourceCode":"  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n};\n\nexport type MainSidebarStateContextValue = Omit<MainSidebarContextValue, 'openMobile' | 'setOpenMobile'>;\n\nexport const MainSidebarContext = React.createContext<MainSidebarStateContextValue | null>(null);\nexport const MobileDrawerContext = React.createContext<MobileDrawerContextValue | null>(null);\n\n/** Reads sidebar state and actions without subscribing to mobile drawer state. */\nexport function useMaybeSidebarState(): MainSidebarStateContextValue | null {\n  return React.useContext(MainSidebarContext);\n}\n\nexport function useMainSidebar(): MainSidebarContextValue {\n  const ctx = React.useContext(MainSidebarContext);\n  const drawer = React.useContext(MobileDrawerContext);\n  if (!ctx || !drawer) {\n    throw new Error('useMainSidebar must be used within a MainSidebarProvider.');\n  }\n  return { ...ctx, ...drawer };\n}\n\nexport function useMaybeSidebar(): MainSidebarContextValue | null {\n  const ctx = React.useContext(MainSidebarContext);\n  const drawer = React.useContext(MobileDrawerContext);\n  if (!ctx || !drawer) return null;\n  return { ...ctx, ...drawer };\n}\n\n/** Reads only mobile drawer state. Cheap — no re-renders on sidebar resize. */\nexport function useMobileDrawer(): MobileDrawerContextValue {\n  const drawer = React.useContext(MobileDrawerContext);\n  if (!drawer) throw new Error('useMobileDrawer must be used within a MainSidebarProvider.');\n  return drawer;\n}\n","sourceCodeStart":29,"sourceCodeEnd":65,"githubUrl":"https://github.com/mastra-ai/mastra/blob/75dd419e613fe9c39f846ffc500716141b74fda6/packages/playground-ui/src/ds/components/MainSidebar/main-sidebar-context.ts#L29-L65","documentation":"useMainSidebar combines MainSidebarContext and MobileDrawerContext, both provided by MainSidebarProvider. If either is missing the hook throws, since sidebar state/consumers depend on both the desktop sidebar state and mobile drawer state being present.","triggerScenarios":"Calling useMainSidebar in a component rendered outside <MainSidebarProvider> (or the layout wrapper that mounts it); using it in a layout region (e.g. a top-level page) that sits above the provider in the tree.","commonSituations":"Adding a sidebar toggle button to a page outside the app shell that hosts the provider; unit tests rendering components without the provider; nesting a new route layout outside the existing shell layout that contains MainSidebarProvider.","solutions":["Render the consumer inside the layout subtree that contains <MainSidebarProvider>.","If only drawer state is needed, or optional access is acceptable, use useMaybeSidebar (returns null outside a provider) instead.","Move MainSidebarProvider higher in the tree (e.g. root layout) so all consumers are covered.","In tests, wrap the component under test with MainSidebarProvider before rendering."],"exampleFix":"// before\nexport default function Page() {\n  const sidebar = useMainSidebar(); // no provider above\n// after\nexport default function Page() {\n  const sidebar = useMaybeSidebar(); // or ensure ancestor <MainSidebarProvider>","handlingStrategy":"fallback","validationCode":"const sidebar = useMaybeSidebar();\nif (!sidebar) {\n  // render a non-sidebar fallback (e.g. plain link) instead of the throwing hook\n}","typeGuard":"function hasSidebar(s: MainSidebarContextValue | null): s is MainSidebarContextValue {\n  return s !== null;\n}","tryCatchPattern":"// Prefer the nullable accessor over catching:\nconst sidebar = useMaybeSidebar() ?? { state: 'default' /* defaults */ };","preventionTips":["Use useMaybeSidebar in shared/portable components that may render outside the shell.","Mount MainSidebarProvider at the app shell root so all layouts are covered.","In tests, always wrap consumers with MainSidebarProvider.","Avoid calling useMainSidebar from route components that sit above the shell layout."],"tags":["react","context","sidebar","playground-ui"],"backgroundTag":"missing-react-context-provider","analyzedSha":"75dd419e613fe9c39f846ffc500716141b74fda6","analyzedAt":"2026-08-30T00:15:31.844Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}