Hydration Issue with Nextjs 13.5 and how to Solve it
Unanswered
Savannah posted this in #help-forum
SavannahOP
The issue
So as I was building my personal portfolio website with Nextjs 13.5...I encountered the following error(image 1). Keep in mind that I was(am) using Mozilla FireFox nightly. This error would only pop up whenever I used the placeholder prop or type prop (image 2). This had me stomped for a couple days searching online. It wasn't until one of the member's from another discord server shared a stackoverflow thread talking about the causes. Turns out this is an issue regarding the email relay extension(Image 3). Whenever this little guy was on, this would pop up. If you turn it off, this issue goes away. Not only that, but it seems there are other extensions that can cause this issue. I hope anyone who finds this thread can get their issue solve â¤ï¸
Here's the SO thread:
https://stackoverflow.com/questions/73571827/nextjs-input-hydration-error-when-using-type-email
So as I was building my personal portfolio website with Nextjs 13.5...I encountered the following error(image 1). Keep in mind that I was(am) using Mozilla FireFox nightly. This error would only pop up whenever I used the placeholder prop or type prop (image 2). This had me stomped for a couple days searching online. It wasn't until one of the member's from another discord server shared a stackoverflow thread talking about the causes. Turns out this is an issue regarding the email relay extension(Image 3). Whenever this little guy was on, this would pop up. If you turn it off, this issue goes away. Not only that, but it seems there are other extensions that can cause this issue. I hope anyone who finds this thread can get their issue solve â¤ï¸
Here's the SO thread:
https://stackoverflow.com/questions/73571827/nextjs-input-hydration-error-when-using-type-email
4 Replies
Basenji
Thanks for this. I'm using a password manager and figured out it was the issue. Other sites don't have these errors with this extension though--do you know a solution to remove the error?
the solution is to add
suppressHydrationWarning prop to the <input> component that throws this errorthe cause of the error is because the extensions update the DOM before React hydration finishes
since this is not caused by your code, the hydration error is expected and you just need to force-suppress the error