Page component with a title causes a hydration mismatch on small breakpoints
SecretPocketCat opened this issue · 3 comments
SecretPocketCat commented
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
<div aria-expanded="true" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; outline-width: 0px; flex: 0 0 auto; color: rgb(227, 227, 227); font-family: "dejavu sans mono", monospace; font-size: 11px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(78, 53, 52); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span class="source-code" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--source-code-font-family); white-space: pre-wrap; font-size: var(--source-code-font-size) !important; line-height: 1.2;"><span class="console-message-anchor" style="box-sizing: border-box; min-width: 0px; min-height: 0px; float: right; text-align: right; max-width: 100%; margin-left: 4px;"><span class="devtools-link ignore-list-link" role="link" tabindex="-1" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-ZRJG7NCB.js?v=f5cbcba1:521" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;"><br class="Apple-interchange-newline">chunk-ZRJG7NCB.js?v=f5cbcba1:521</span> </span><span class="console-message-text" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--override-error-text-color) !important;">Warning: Did not expect server HTML to contain a <div> in <div>.
at div
at ConditionalRender (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:20889:3</span>)
at FilterActionsProvider (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:18265:13</span>)
at div
at div
at <span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:17765:7</span>
at Header4 (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:40291:3</span>)
at div
at Page (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:40580:13</span>)
at Index (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/app/routes/_app._index/route.tsx?t=1712903960413" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/app/routes/_app._index/route.tsx?t=1712903960413:10:7</span>)
at RenderedRoute (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:780:5</span>)
at Outlet (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1091:26</span>)
at EphemeralPresenceManager (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:6074:13</span>)
at FocusManager (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:6026:13</span>)
at PortalsManager (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:5979:13</span>)
at MediaQueryProvider2 (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:5910:17</span>)
at AppProvider (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BBE5A7YJ.js?v=f5cbcba1:6155:9</span>)
at AppProvider (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/@shopify_shopify-app-remix_react.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/@shopify_shopify-app-remix_react.js?v=f5cbcba1:485:9</span>)
at App (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/app/routes/_app/route.tsx" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/app/routes/_app/route.tsx:23:7</span>)
at RenderedRoute (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:780:5</span>)
at RenderErrorBoundary (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1305:9</span>)
at Outlet (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1091:26</span>)
at div
at body
at html
at App
at RenderedRoute (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:780:5</span>)
at RenderErrorBoundary (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1305:9</span>)
at DataRoutes (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:2001:5</span>)
at Router (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1098:15</span>)
at RouterProvider (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:1818:5</span>)
at RemixErrorBoundary (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:6717:9</span>)
at RemixBrowser (<span class="devtools-link" title="https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1" role="link" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--sys-color-primary); text-decoration: underline; outline-offset: 2px; cursor: pointer; word-break: break-all;">https://justice-jam-pg-checked.trycloudflare.com/node_modules/.vite/deps/chunk-BA3YIL6Y.js?v=f5cbcba1:7457:46</span>)</span></span></div><div class="" role="group" style="box-sizing: border-box; min-width: 0px; min-height: 0px; flex: 0 0 auto; color: rgb(227, 227, 227); font-family: "dejavu sans mono", monospace; font-size: 11px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(78, 53, 52); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span class="monospace stack-preview-container" style="display: inline-block; width: 775.6px; --monospace-font-size: 11px; --monospace-font-family: dejavu sans mono,monospace; --source-code-font-size: 11px; --source-code-font-family: dejavu sans mono,monospace; box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--monospace-font-family); font-size: var(--monospace-font-size) !important;">
| 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
</span></div>
Steps to reproduce
sandbox does not log hydration mismatches, so probably not relevant here
- Create a page component with the title prop
<Page title="Hello hydration mismatch">Make me small and refresh</Page>- Make the window small
- Refresh
- 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
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.