Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
SecretPocketCat opened this issue Apr 12, 2024 · 3 comments · Fixed by #12824
Closed

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

SecretPocketCat opened this issue Apr 12, 2024 · 3 comments · Fixed by #12824
Assignees
Labels
Bug Something is broken and not working as intended in the system.

Comments

@SecretPocketCat
Copy link

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: &quot;dejavu sans mono&quot;, 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 &lt;div&gt; in &lt;div&gt;.
    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: &quot;dejavu sans mono&quot;, 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

  1. Create a page component with the title prop
<Page title="Hello hydration mismatch">Make me small and refresh</Page>
  1. Make the window small
  2. Refresh
  3. 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)

@SecretPocketCat SecretPocketCat added Bug Something is broken and not working as intended in the system. untriaged labels Apr 12, 2024
@Nedomas
Copy link

Nedomas commented May 7, 2024

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.

@moraleslevi
Copy link
Contributor

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.

@vincaslt
Copy link

Getting this too on small breakpoints. The only thing I have is <Page title="some text"> with empty contents. The warning is:

Warning: Did not expect server HTML to contain a <div> in <div>.

And then it throws hydration errors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something is broken and not working as intended in the system.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants