You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am getting this too. I get this when using title, titleMetadata, backAction or secondaryActions on Page. Haven’t tested other Page props, but it looks like many of those could affect the SSR vs hydrated Page component. As far as I understand this also trips LCP scores.
This seems to be caused by the use of <ConditionalRender> on the <Page> element <Header> which relies on the client-side media query to determine if isNavigationCollapsed.
Summary
Using the
Page
component with a header (e.g. setting the title prop) causes a hydration mismatch on small breakpoints.Expected behavior
SSR works fine on all breakpoints.
Actual behavior
Wrap animated gifs/videos in a details tag:
Hydration mismatch on small breakpoint
Steps to reproduce
sandbox does not log hydration mismatches, so probably not relevant here
Are you using React components?
Yes
Polaris version number
12.23.0
Browser
Chrome (122.0.6261.128)
Device
PC (Linux)
The text was updated successfully, but these errors were encountered: