ai-chatbot icon indicating copy to clipboard operation
ai-chatbot copied to clipboard

Hydration failed because the server rendered HTML didn't match the client

Open fabiancpl opened this issue 1 month ago • 0 comments

Hi.

I just deployed locally the template and I'm getting this 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.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

which is pointing here: https://github.com/vercel/ai-chatbot/blob/main/components/ui/textarea.tsx

Is there a solution for this problem?

fabiancpl avatar Nov 04 '25 20:11 fabiancpl