Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Classname issue in SSR

See original GitHub issue

Hello there 👋🏻

Following the example from the theme selector, I saw an issue with the classname while using SSR

Warning: Prop `className` did not match. Server: "actionIcon-0-2-15 actionIcon-d4-0-2-21
outline-0-2-16 outline-d5-0-2-22 child-0-2-8 child-d1-0-2-10 dark-0-2-5" 
Client: "actionIcon-0-2-19 actionIcon-d10-0-2-31 outline-0-2-20 outline-d11-0-2-32
 child-0-2-10 child-d3-0-2-14 dark-0-2-7"
    at button...

It seems hydration is not working as expected in the <ActionIcon /> component.

Tech notes:

"@mantine/core": "1.0.6",
"@mantine/hooks": "1.0.6",
"@mantine/notifications": "1.0.6",
"react-jss": "10.6.0"
"blitz": "0.34.3"

Cheers

edit: on prod build the error is not there, only reproducible on dev mode 😄

Issue Analytics

State:
Created 2 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

2reactions

rtivitalcommented, May 12, 2021

Nope, let’s leave this open so that anyone else can join the conversation

1reaction

rtivitalcommented, May 12, 2021

Hi Juan, on prod issue does not show up because react-dom shows warnings only in dev mode – it’s still there. It’s not ActionIcon which produces this error – if you comment it out, next component in rendering order will show this message. This is the same as #53 – server and client generate different classNames somehow.

Top Results From Across the Web

Same classname applied in SSR · Issue #3125 - GitHub

I have created my environment Next JS with styled component. Some first time style appear not properly, after refresh only render correctly.

NextJS component having wrong class applied when SSR on ...

Everything works fine when I'm working locally on dev. but as soon as it's built and running on production server side rendering, it...

Our journey to make styled-components work with server-side ...

The official styled-components documentation mentions that there could be class name mismatches between client and server, and to avoid them, we should use ......

react-hydration-error - Next.js

When css-in-js libraries are not set up for pre-rendering (SSR/SSG) it will often lead to a hydration mismatch. In general this means the...

Handling the React server hydration mismatch error

NOTE: Apps using a CSS-in-JS library (such as emotion) also run into this warning with mismatched className props. But the issue isn't that ......