Unbelievable hydration error in #nextjs

Показать описание

Рекомендации по теме

Комментарии

hydration error? give some water for your code it my be dehydrated.

abnersilvagamer

You're officially a programmer when you spend over 2 hours on a stupid issue that has nothing to do with your code 😂

JackOfTrades

Happened to me. The QA kept sending my tickets back because his Grammarly extension was modifying the DOM

adrianbunea

The solution is (spot the incorrect answer):
A) use the error message and devtools to figure out what's going on
B) take the opportunity to make your app more resilient to common browser extensions messing with the DOM
C) switch to testing in incognito mode, the issue no longer exists if you can't see it

Qbe_Root

So you don't solve it, just hide it?😂

ivanmakevic

Dynamic languages are soooo productive lol

cherubinth

It only affects developers, so people saying 'You should fix that because users use extensions', etc. just don't know even nextjs. This error only appears because the extension alters some tag or just the structure of the HTML document and makes the server and client have mismatching results that trigger an error to warn the developer that something is off and unusual, after deployment, it won't. So using incognito is a fine solution, there is one quick other if you want to use extensions either way, just add to <html> tag in the component (of course it will suppress that warning only in that component).

yuu-

Strange bug, but extremely common for client to have last pass, Google passwords saved, a Mac with keychain, nord password, etc., all inject into dom. It is your code. I have last pass and develop react internally at company, along with personal projects. So it is something you need to fix. If you spin up a fresh react app with username/password inputs, or go to any professional react website, you wouldn’t see the error.

Mistrrbot

I had the same issue and I spent a whole week to figure this out... It was really frustrating

kazeemquadri

Well, it does have to do something with your code, your clients may have this extension as well.

johetajava

That’s why u test with a clean install

moritz

This problem exists since more than a year, a ticket got opened at react (it’s a react matter, not next), they claimed that it is fixed for the next update, but we are still waiting this update …

walidmkw

I also saw another user from another video mentioned “ your provider needs to be within the body tags” or remove the nexts head component

kimbapslayer

I had this issue 2 days ago while trying to have my header not show on the login screen😭 literally spent all day and all night trying to figure it out.

marztianpapi

I spent 3 hours too... Then I finally found this video. You are my saviour

darioleggenda

It also happen when using Google Translator to translate all the page

germansolano

And make sure you haven't explicitly set whatever addons you've installed to work in incognito mode of course!

envueltoenplastico

Don’t forget that someone else with last pass might get the error still..

igloro_yt

This incognito solution is just awesome 😎

samnayakawadi

me when my website was getting 89% on Lighthouse when 90 is the pass bar, and realising my ad blocker was slowing it down (about 2 hours sounds right!) 😂

paultapping

Unbelievable hydration error in #nextjs

Unbelievable hydration error in #nextjs

Next.js HydrationError Fix (Common)

Every HydrationError in Next.js

Resolving Hydration Error in Next.js under 1 min.

Next.js Hydration failed because the initial ui does not match what was rendered on the server (FIX)

Hydration Explained

How to Fix Error: Hydration failed in React OR NextJS

NextJS 15: React 19, Less Caching, Turbopack, Better Hydration Errors and MORE from Vercel Ship!

Hydration failed because the initial UI does not match what was rendered on server - error

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Unhandled Runtime Error There was an Error While Hydrating nextjs

Master NextJS Error Handling in 10 Minutes

WTF is hydration?

Unhandled Runtime Error in next.js || react.js || Hydration error

Easiest way to enable dark mode for Next.js + Tailwind (Solved Hydration error)

What is Hydration

Keep your next.js code cleaner by doing this simple rename #shorts

Use This Reset Function in Your Next.JS Error Pages!

Hydrated ReactJS with Nextjs with example | Concept of reactjs hydration | Next JS full course #18

DON'T Make This Mistake with Next.js Server Components (BAD performance!)

Get started with rainbowkit + wagmi + nextJs [hydration error fix]

Next.js hydration errors frustrate me

Error Handling in Server Actions Next.js (Incl. Toasts!)

How to Add a Page Load Progress Bar in NextJS