Update use-mobile hook for SSR compatibility - #203
Open
christopherstyles wants to merge 1 commit into
Open
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
When deploying with SSR using Kamal I was getting an error at the very end, on my healthcheck:
Logs1 revealed the
vite_ssrcontainer crash-looping withReferenceError: window is not defined.The root cause was theuseIsMobilehook accessingwindow.matchMedia, so the SSR bundle crashed as soon as Node tried to import it.The following changes were made:
typeof window !== "undefined".useSyncExternalStoreso SSR renders a stable default (false).1
bin/kamal app logs -r vite_ssr --since 10m