search

Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.
https://polaris.shopify.com
Other
5.76k stars 1.17k forks source link

Page component with a title causes a hydration mismatch on small breakpoints #11886

Open SecretPocketCat opened 4 months ago

SecretPocketCat commented 4 months ago

Summary

Using the Page component with a header (e.g. setting the title prop) causes a hydration mismatch on small breakpoints.

<Page title="Hello hydration mismatch">Make me small and refresh</Page>

Expected behavior

SSR works fine on all breakpoints.

Actual behavior

Wrap animated gifs/videos in a details tag:

Hydration mismatch on small breakpoint ```

chunk-ZRJG7NCB.js?v=f5cbcba1:521 Warning: Did not expect server HTML to contain a <div> in <div>. at div at ConditionalRender (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:20889:3) at FilterActionsProvider (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:18265:13) at div at div at https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:17765:7 at Header4 (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:40291:3) at div at Page (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:40580:13) at Index (https://justice-jam-pg-checked.trycloudflare.com/app/routes/_app._index/route.tsx?t=1712903960413:10:7) at RenderedRoute (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:780:5) at Outlet (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1091:26) at EphemeralPresenceManager (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:6074:13) at FocusManager (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:6026:13) at PortalsManager (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:5979:13) at MediaQueryProvider2 (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:5910:17) at AppProvider (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:6155:9) at AppProvider (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/@shopify_shopify-app-remix_react.js?v=f5cbcba1:485:9) at App (https://justice-jam-pg-checked.trycloudflare.com/app/routes/_app/route.tsx:23:7) at RenderedRoute (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:780:5) at RenderErrorBoundary (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1305:9) at Outlet (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1091:26) at div at body at html at App at RenderedRoute (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:780:5) at RenderErrorBoundary (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1305:9) at DataRoutes (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:2001:5) at Router (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1098:15) at RouterProvider (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1818:5) at RemixErrorBoundary (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:6717:9) at RemixBrowser (https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:7457:46)
  | printWarning | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:521 -- | -- | -- | --   | error | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:505   | warnForDeletedHydratableElement | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:7993   | didNotHydrateInstance | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:8720   | warnUnhydratedInstance | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:9325   | warnIfUnhydratedTailNodes | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:9636   | popHydrationState | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:9612   | completeWork | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:16273   | completeUnitOfWork | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:19220   | performUnitOfWork | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:19202   | workLoopConcurrent | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:19185   | renderRootConcurrent | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:19160   | performConcurrentWorkOnRoot | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:18674   | workLoop | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:197   | flushWork | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:176   | performWorkUntilDeadline | @ | chunk-ZRJG7NCB.js?v=f5cbcba1:384
```

Steps to reproduce

sandbox does not log hydration mismatches, so probably not relevant here

  1. Create a page component with the title prop 
    <Page title="Hello hydration mismatch">Make me small and refresh</Page>
  2. Make the window small
  3. Refresh
  4. Look for hydration mismatch logs in the console

Are you using React components?

Yes

Polaris version number

12.23.0

Browser

Chrome (122.0.6261.128)

Device

PC (Linux)

Nedomas commented 4 months ago

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.