Shopify/polaris

Hydration errors on mobile with Page Component

Opened this issue · 1 comments

nickfthedev commented

Summary

As stated above i got hydration errors with the Page Component on smaller screen widths when using multiple buttons in the page component.
I assume the issue has to do something with use of window for getting the width which then fails on server side rendering

The issue is triggered when the buttons on the right side of the Page component get minimized into the single 3 dot button.

Expected behavior

No response

Actual behavior

Wrap animated gifs/videos in a details tag:

Summary of your gif(s) Description of what the gif shows

Steps to reproduce

Link to sandbox
1.
2.
3.

Are you using React components?

None

Polaris version number

No response

Browser

No response

Device

No response

vincaslt commented

Edit, in my case it was outdated Polaris package, it's fixed in 13.9.1

I am also getting this, even on pages that don't have any buttons added into the Page component, but if the initial render is on small screen. Here's the trace:

Warning: Prop `className` did not match. Server: "Polaris-Page-Header--isSingleRow Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle" Client: "Polaris-Page-Header--isSingleRow Polaris-Page-Header--mobileView Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle"
    at div
    at div
    at https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-ZGNNTB2U.js?v=9f6a9645:7695:3
    at Header4 (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-ZGNNTB2U.js?v=9f6a9645:26922:3)
    at div
    at Page (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-ZGNNTB2U.js?v=9f6a9645:27184:13)
    at Index (https://biotechnology-requests-strictly-accessing.trycloudflare.com/app/routes/app._index/route.tsx:26:7)
    at RenderedRoute (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-LPIP5U2N.js?v=9f6a9645:400:5)
    at Outlet (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-LPIP5U2N.js?v=9f6a9645:733:26)
    at ShareTranslations (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-L4E7JUOV.js?v=9f6a9645:2235:5)
    at DiscountsI18nProvider (https://biotechnology-requests-strictly-accessing.trycloudflare.com/app/components/DiscountsI18nProvider.tsx:6:3)
    at EphemeralPresenceManager (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-ZGNNTB2U.js?v=9f6a9645:6842:13)
    at FocusManager (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-ZGNNTB2U.js?v=9f6a9645:6799:13)
    at PortalsManager (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-ZGNNTB2U.js?v=9f6a9645:6763:13)
    at MediaQueryProvider2 (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-ZGNNTB2U.js?v=9f6a9645:6708:13)
    at AppProvider (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-ZGNNTB2U.js?v=9f6a9645:6893:5)
    at AppProvider2 (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/@shopify_shopify-app-remix_react.js?v=9f6a9645:446:11)
    at App (https://biotechnology-requests-strictly-accessing.trycloudflare.com/app/routes/app.tsx:25:7)
    at RenderedRoute (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-LPIP5U2N.js?v=9f6a9645:400:5)
    at RenderErrorBoundary (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-LPIP5U2N.js?v=9f6a9645:360:5)
    at Outlet (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-LPIP5U2N.js?v=9f6a9645:733:26)
    at body
    at html
    at App (https://biotechnology-requests-strictly-accessing.trycloudflare.com/app/root.tsx:26:7)
    at RenderedRoute (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-LPIP5U2N.js?v=9f6a9645:400:5)
    at RenderErrorBoundary (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-LPIP5U2N.js?v=9f6a9645:360:5)
    at DataRoutes (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-LPIP5U2N.js?v=9f6a9645:1386:5)
    at Router (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-LPIP5U2N.js?v=9f6a9645:740:15)
    at RouterProvider (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-LPIP5U2N.js?v=9f6a9645:1203:5)
    at RemixErrorBoundary (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-LPIP5U2N.js?v=9f6a9645:2741:5)
    at RemixBrowser (https://biotechnology-requests-strictly-accessing.trycloudflare.com/node_modules/.vite/deps/chunk-LPIP5U2N.js?v=9f6a9645:4305:46)