Classname issue in SSR

[juan-manuel-alberro]

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 😄

[rtivital]

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.

[juan-manuel-alberro]

Do you want me to close this issue and follow this in the other ticket?

[rtivital]

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

[kwiat1990]

Currently I experience the very same issue with a custom avatar component based upon Mantine's avatar. After page reload I get this error and the styles from avatar are broken. This happens with Mantine 4.2.6 with Next 12.1.4.

[rtivital]

From FAQ:

Next.js SSR does not work/while page is loading there are no styles/styles do not work without JavaScript
You haven't configured SSR correctly. To fix that use template (https://github.com/mantinedev/mantine-next-template) or:

• Follow the Next.js getting started guide – https://mantine.dev/theming/next/
• Delete .next folder to reset cache
• If that does not help try using yarn instead of npm to install dependencies
• Note that Next.js of version 12.1.5 has ssr issues with emotion, you should install other version

[kwiat1990]

@rtivital I’m using Next 12.1.4 with this template and yarn as package manager.

[rtivital]

Well, no idea then, template works as expected for me

[kwiat1990]

I have took a look at this page in Next Docs and bingo. My problem was a border color, which I was setting dynamically like this:

<MantineAvatar
    ...
    styles={theme => ({
        root: {
            border: `2px solid ${getRandomColor(theme.color)}`,
        }
    })}
>
...

The fix is to combine useState and useEffect to handle setting random color:

const [color, setColor] = React.useState("");
const theme = useMantineTheme();

React.useEffect(() => {
    setColor(getRandomColor(theme.colors));
}, []);