Skip to content

Fix: useSidebar hook throws during SSR/prerendering #236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hotlong merged 3 commits into from
Jan 27, 2026
Merged

Fix: useSidebar hook throws during SSR/prerendering #236

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3796bd3
Initial plan
Copilot Jan 27, 2026
7454abd
Fix: Make useSidebar hook gracefully handle missing provider during SSR
Copilot Jan 27, 2026
ebfd6a5
Refactor: Extract DEFAULT_SIDEBAR_STATE constant for better maintaina…
Copilot Jan 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion packages/components/src/ui/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,22 @@ type SidebarContextProps = {

const SidebarContext = React.createContext<SidebarContextProps | null>(null)

// Default sidebar state for when no provider exists (e.g., during SSR/prerendering)
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comment mentions "SSR/prerendering" but the actual issue is specifically about static site generation where components are rendered outside of a provider tree. Consider updating the comment to be more precise:

// Default sidebar state for graceful degradation when used outside SidebarProvider
// (e.g., during SSR, static generation, or standalone component usage)

This clarifies that it's not just an SSR concern but a broader architectural pattern for components that may be rendered in isolation.

Suggested change
// Default sidebar state for when no provider exists (e.g., during SSR/prerendering)
// Default sidebar state for graceful degradation when used outside SidebarProvider
// (e.g., during SSR, static generation, or standalone component usage)

Copilot uses AI. Check for mistakes.
const DEFAULT_SIDEBAR_STATE: SidebarContextProps = {
state: "expanded",
open: true,
setOpen: () => {},
openMobile: false,
setOpenMobile: () => {},
isMobile: false,
toggleSidebar: () => {},
}

function useSidebar() {
const context = React.useContext(SidebarContext)
if (!context) {
throw new Error("useSidebar must be used within a SidebarProvider.")
// Return default values to allow components to gracefully degrade without breaking the build
return DEFAULT_SIDEBAR_STATE
Comment on lines 66 to +70
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The header-bar component (packages/components/src/renderers/navigation/header-bar.tsx:26) unconditionally renders a SidebarTrigger, but this creates an implicit coupling between header-bar and SidebarProvider. During SSR or when header-bar is used without a sidebar, the trigger renders but has no sidebar to control.

Consider one of these architectural improvements:

  1. Make the sidebar trigger optional in header-bar schema:
interface HeaderBarSchema {
  showSidebarTrigger?: boolean; // Default: false for better SSR compatibility
  // ... other props
}
  1. Add a dedicated slot for the trigger so users explicitly choose when to include it:
interface HeaderBarSchema {
  leftSlot?: SchemaNode[]; // Users can explicitly add SidebarTrigger here
  // ... other props
}

This would align with ObjectUI's principle of "JSON-driven composition" where components are explicitly configured rather than having implicit dependencies.

Copilot generated this review using guidance from repository custom instructions.
}

return context
Expand Down
Loading