What's your biggest current challenge? Have your say in Community Polls along the right column.

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

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

haffdolla
Shopify Partner
3 0 5

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-ac.... 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.

Reply 1 (1)

shopfy-scrub
Visitor
1 0 0

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