I constantly get this error when running (not production) my app. It’s pretty extensive app (website) and I specifically tell the AI to use Python with only a Jinja front end while having API endpoints.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
This is the error:
Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
I get this error even for basic apps that only process a json file. I can provide the full step-by-step prompt if anyone from Google wants to reach out. I can’t post it here because, you know, privacy stuff. Everything is public facing, but still…
I am giving a presentation on AI in the next few weeks and would love to feature this and would love to promote the Google ecosystem since Google services has been an approved service through my highly visible organization (in the news daily).
I used Google AI Studo to help refine the prompt into smaller, logical steps.
‘Fixing’ thru the UI doesn’t seem to solve problems.