Unhandled Runtime Error
Answered
Bombay posted this in #help-forum
BombayOP
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <div> in <a>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
I am learning NextJS and i need help with this warning/error.
The application still runs but i would like to have a better understanding.
I understand the problem is related to Link component in dynamic routes but i m not sure.
7 Replies
@Bombay > Error: Hydration failed because the initial UI does not match what was rendered on the server.
>
> Warning: Expected server HTML to contain a matching <div> in <a>.
>
> See more info here: https://nextjs.org/docs/messages/react-hydration-error
I am learning NextJS and i need help with this warning/error.
The application still runs but i would like to have a better understanding.
I understand the problem is related to Link component in dynamic routes but i m not sure.
Does your CollectionGrid also render a link as well? what does it look like
@joulev Does your CollectionGrid also render a link as well? what does it look like
BombayOP
Yes indeed. I can confirm that the problem is related to the Link since i have done a few checks.
@Bombay Yes indeed. I can confirm that the problem is related to the Link since i have done a few checks.
Yeah so the problem here is that Link cannot be inside Link
Answer
<a> cannot be a child of another <a>
Same for <button>
I think same for <a> inside <button> and vice versa too
@joulev Yeah so the problem here is that Link cannot be inside Link
BombayOP
Thanks a lot. everything is now working.