"className does not match" error when reloading copy/pasted Polaris Page component

Shopify Apps

Topic summary

Issue: Using the Polaris Page component example in a Shopify Remix app, reloading the page in Chrome at a narrow viewport triggers a React hydration mismatch: Server className: “Polaris-Page-Header- -mediumTitle” vs Client: “Polaris-Page-Header–mobileView Polaris-Page-Header–mediumTitle”.

Context: Code is copied directly from Polaris docs and uses the latest dependencies in a basic Shopify Remix setup.

Likely cause: A server–client render mismatch (SSR vs client) potentially triggered by DOM mutations from browser extensions (e.g., password managers like LastPass) that modify class names or the DOM after SSR.

Suggested troubleshooting:

  • Disable DOM-modifying extensions (e.g., LastPass) and reload.
  • Test in incognito mode or a different browser.

Status: No confirmed resolution yet; diagnostic steps proposed. Outcome depends on whether the mismatch persists after disabling extensions and testing in clean environments.

Summarized with AI on December 13. AI used: gpt-5.
1

Hello!

I’m having a problem with the Polaris Page component found here: https://polaris.shopify.com/components/layout-and-structure/page?example=page-with-custom-primary-action. I’m using the exact code in the example. When I reload the page in Chrome with a narrow browser width, I get this error:

Prop className did not match. Server: “Polaris-Page-Header–mediumTitle” Client: “Polaris-Page-Header–mobileView Polaris-Page-Header–mediumTitle”

I haven’t changed anything in the code, and I am using the latest versions of all dependencies and in an app built using the basic remix app here: https://shopify.dev/docs/apps/getting-started/create

Does anyone know what’s going on? I have been searching for an hour and I can’t find anything on these forums or in google.

1 Like
2

Hard to say without looking at the code but,

I’ve had this problem with password fields, some extensions like lastpass modify some classnames on the DOM
Also disable any browser extensions that modify the DOM like lastpass.

With remix, this may cause an error because what’s rendered on the server is different to the client

Try a different browser, incognito, or disabling all extensions