Next.js Discord

Discord Forum

How to debug styled-components hydration errors

Answered
Frank posted this in #help-forum
Open in Discord
I am having trouble figuring out where to start with these hydration errors. I went through an exercise to ensure styled-components were [properly installed](https://nextjs.org/docs/app/building-your-application/styling/css-in-js) and fixed a few transient prop issues, but this huge hydration error... I understand the diff, but I don't even know where to start.

I asked the Mantine crew and they said it's not related to their theme. Where do I start? How does one start debugging these kinds of hydration errors?

[Link to branch I am working on](https://github.com/caoimghgin/prismcolor.io/tree/feature-react-compiler)
Answered by Frank
Removing React Compiler fixed the hydration errors. 🤷🏻
View full answer

4 Replies

The actual error is hook.js:608 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. ...
I tried disabling all of these extensions so that's not it.
Oooo I think it's a React Compiler issue...
Removing React Compiler fixed the hydration errors. 🤷🏻
Answer