Skip to content

Update use-mobile hook for SSR compatibility - #203

Open
christopherstyles wants to merge 1 commit into
inertia-rails:mainfrom
christopherstyles:patch-2
Open

Update use-mobile hook for SSR compatibility#203
christopherstyles wants to merge 1 commit into
inertia-rails:mainfrom
christopherstyles:patch-2

Conversation

@christopherstyles

Copy link
Copy Markdown

When deploying with SSR using Kamal I was getting an error at the very end, on my healthcheck:

ERROR (Kamal::Cli::Healthcheck::Error): Exception while executing on host x.x.x.x: container not ready after 30 seconds (restarting)
Error: Process completed with exit code 1.

Logs1 revealed the vite_ssr container crash-looping with ReferenceError: window is not defined. The root cause was the useIsMobile hook accessing window.matchMedia, so the SSR bundle crashed as soon as Node tried to import it.

The following changes were made:

  • Removed all top-level window usage by lazily creating the MediaQueryList only when typeof window !== "undefined".
  • Added a server snapshot to useSyncExternalStore so SSR renders a stable default (false).

1 bin/kamal app logs -r vite_ssr --since 10m

Updated the `useIsMobile` hook to safely handle server-side rendering by checking for window existence before accessing matchMedia. Added a fallback for the useSyncExternalStore server snapshot to prevent errors during SSR.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant