Hydratation error - different order of styles vs classes in props

[petrvecera]

Summary

We are getting Hydratation errors on our page. The error is because server is sending in the props styles first and classes second. Client has first classes and style second. See the attached images.

This error started when we updated to the latest version of NextJS 14.2 ("next": "14.2.30",) from version 14.2.8 or something.

This is happening to just:

• 5% of our users (we are able to track this via sentry)
• unable to reproduce this locally or on production on developer machines / browser
• errors are on all pages -- no page specifically causing this -- all kind of OS / Browsers / mobile / desktop across

Additional information

No response

Example

No response

[icyJoseph]

I wanna say that the order of attributes in the HTML shouldn't necessarily cause hydration errors, right?

I'd go first after the divergent id - on the left I see mantine-Rdd.. on the right mantime-uss9.. - This sounds like the server and client side tree are different, ever so slightly.

This can happen with useId, but I don't think this is at hand here. I'd doubt this is a SWC compiler issue, cuz then it'd show for every user. With useId - ids can diverge because:

Inside React, useId is generated from the “parent path” of the calling component. This is why, if the client and the server tree are the same, the “parent path” will match up regardless of rendering order.

I wonder if your have feature flags, or conditional context providers applies given some client side data?

[petrvecera]

❤️ Thank you very much for pointing me in the right direction.

I was able to reproduce the error. It's happening when the user has light theme setup (themes are handled client side only - if the user comes with light theme for the first time, they might see a flicker (we know it's not ideal - but we have small part of the users who wanted light theme).

But I am not sure why it started firing now the hydratation errors, we had the light theme there forever.

I need to wrap my head about this - why it's an issue 🤔

[icyJoseph]

Is there any logic that does if (lightTheme) return <ThisThree /> or wraps the React tree with a different context provider? or adds a new node?

[petrvecera]

We got rid of anything that could cause hydratation errors and we are using css modules. But over there we are using light-dark CSS functions. To make that work on all browser, it's using
https://www.npmjs.com/package/postcss-nested & https://www.npmjs.com/package/postcss-mixins
To be honest, I don't know how this works. ^^

But this was the reason why I couldn't figure this out - because we got used to good code hygiene about the hydratation and in recent year avoided any code where it could cause the problems.

The only thing which is boggling my mind is that all the setup we have used to work before. We didn't introduced anything new to the styling. We just updated the libraries 😢

[icyJoseph]

Right, but this looks like, at first, a Mantine issue, I went over to their repo and didn't find anything meaningful. I wonder though if there's other libraries here that could be causing the issue.

Are you now able to reproduce this locally?