Learn Next - Ch 15 - Authentication chapter causes Hydration error
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
Hi there/ I am following the dashboard tutorial with Next.js 14.2.3. Until now everything worked without a hitch. Until chapter 15. After the changes from the authentication chapter I get a hydration error in the console output. The same error also appears when using the final version in the official repository. Can someone help me avoid this error?
https://nextjs.org/learn/dashboard-app/adding-authentication
https://nextjs.org/learn/dashboard-app/adding-authentication
Answered by Asian black bear
This problem can apparently be caused by extensions. Here is a similar error:
https://github.com/vercel/next.js/discussions/22388
On incognito, I don't get an error
https://github.com/vercel/next.js/discussions/22388
On incognito, I don't get an error
21 Replies
Asian black bearOP
For anyone interested: This is the commit which causes the error messages for the first time:
https://github.com/ucyo/www-next-dashboard/commit/6a72e057122019e1a87f7315506f9be581f679b5
https://github.com/ucyo/www-next-dashboard/commit/6a72e057122019e1a87f7315506f9be581f679b5
it "could" be this as react usually doesnt like the hyphen and rathers cammelSase and then on html output is proper
Asian black bearOP
Hi. Thanks for the hint. I just checked and I don't think that is the reason. In a previous commit [0] I also use the
[0] https://github.com/ucyo/www-next-dashboard/commit/fd89b92a3e30c97b84d59adfd20f296c310ae59d
aria-describedby keyword in the template and there are no errors in the console. But I will keep this in mind for possible future problems with react. Thx.[0] https://github.com/ucyo/www-next-dashboard/commit/fd89b92a3e30c97b84d59adfd20f296c310ae59d
ah ok, just couldnt really see anything else on glance 😭
does the latest nextjs version give any useful info (like they said they made hydration errors better and show more info)
Asian black bearOP
Just updated the commit. I have given the wrong commit previously. This is the one causing the errore: https://github.com/ucyo/www-next-dashboard/commit/6a72e057122019e1a87f7315506f9be581f679b5
@riský ah ok, just couldnt really see anything else on glance 😭
Asian black bearOP
I dunno about any plans to improve the info for hydration errors. The documentation and tutorial on the official site are actually pretty great and this is the first major error I stumbled upon
i mean this also has the things but i never remember it giveing that error, it just got sad in console... yeah i also cant find much here sadly
without much more info on where it is and what you did to get it and what it shows ig (i havent ever done the turt sadly)
Asian black bearOP
This is the first error occurring. But it is a bit cryptic for me about the origin
and with dev its fine?
Asian black bearOP
Kinda solved it
YAYYY
Asian black bearOP
This problem can apparently be caused by extensions. Here is a similar error:
https://github.com/vercel/next.js/discussions/22388
On incognito, I don't get an error
https://github.com/vercel/next.js/discussions/22388
On incognito, I don't get an error
Answer
ah those
i have made sure to stay away from those as you have waisted lots of time here i assume
Asian black bearOP
THanks for your time and help @riský
np, glad it was a simple fix tho
Asian black bearOP
🙂 Only the whole day 🙂
my chaos roles which kinda work:
1. if it doesnt work try hard refresh
2. try incognito (ie remove cookies)
3. another browser
4. cry
1. if it doesnt work try hard refresh
2. try incognito (ie remove cookies)
3. another browser
4. cry
Asian black bearOP
I will print and hang it next to my monitor ... might add "5. Ask Risky" before doing it though