UI Hydration Failed without Call Stack
Answered
Abyssinian posted this in #help-forum
AbyssinianOP
I upgraded from Next.js 10 to Next.js 14 & React from version 16 to 18. Besides some typescript stuff that I had to fix, one additional babbel plugin that I had to install and some UI bugs, everything works fine. Even the builds work and when I start the application in production mode, it works. But on every refresh in local dev mode, I get this error. I don't know why. I have checked and I do not seem to have any broken nesting for my tags. Also Next.js does not tell me where exactly the issue, there is no stack-trace which component the issue is coming from and does not exist in my code anyway.
Answered by Abyssinian
it's solved, via the console i noticed that I had some styled-components anchor tags in some Link elements, during migration I only removed all simple a tags, but the styled-components also render as anchor tags in the end, didn't even know i have used some through styled-components
10 Replies
@Abyssinian I upgraded from Next.js 10 to Next.js 14 & React from version 16 to 18. Besides some typescript stuff that I had to fix, one additional babbel plugin that I had to install and some UI bugs, everything works fine. Even the builds work and when I start the application in production mode, it works. But on every refresh in local dev mode, I get this error. I don't know why. I have checked and I do not seem to have any broken nesting for my tags. Also Next.js does not tell me where exactly the issue, there is no stack-trace which component the issue is coming from and does not exist in my code anyway.
well it says
Expected server HTML to contain a matching <a> in <a>.which is the error here. check your project for <a> nested inside <a>. <Link> is <a> so <Link> nested in <Link> is also disallowed
@joulev well it says
> Expected server HTML to contain a matching <a> in <a>.
which is the error here. check your project for <a> nested inside <a>. <Link> is <a> so <Link> nested in <Link> is also disallowed
AbyssinianOP
Thing is that I don't really have any nested <a> in my project anymore
That's why I am so confused
and it does not tell me where
@Abyssinian and it does not tell me where
The thing is, react hydration error has never had stack traces, because they are not “normal” errors. To know why is a long story.
What I’d do if I was you, would be to remove parts of the page until the error goes away. That is where the bug is.
What I’d do if I was you, would be to remove parts of the page until the error goes away. That is where the bug is.
@Abyssinian and it does not tell me where
another thing you could do is check the error within the console. sometimes, those errors are more descriptive
@Dayo another thing you could do is check the error within the console. sometimes, those errors are more descriptive
AbyssinianOP
Yes, that came to my mind a few minutes befor you wrote that, but good call! Apparently styled-components is the #Unknown Channel
ah
and MobX
@joulev The thing is, react hydration error has never had stack traces, because they are not “normal” errors. To know why is a long story.
What I’d do if I was you, would be to remove parts of the page until the error goes away. That is where the bug is.
AbyssinianOP
it's solved, via the console i noticed that I had some styled-components anchor tags in some Link elements, during migration I only removed all simple a tags, but the styled-components also render as anchor tags in the end, didn't even know i have used some through styled-components
Answer