search

maxeth / react-type-animation

A React typewriter animation based on typical with extended functionality and customization.
https://react-type-animation.netlify.app/
MIT License
353 stars 25 forks source link

Error when using with next.js #19

Closed caevv closed 1 year ago

caevv commented 1 year ago 
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error
Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
maxeth commented 1 year ago

There shouldn't really be anything about the component that could cause a hydration error. Are you sure it's not from something else?

How exactly are you using it?

datisekai commented 1 year ago

I also encountered this error when using NextJS, probably due to the library.

maxeth commented 1 year ago

I also encountered this error when using NextJS, probably due to the library.

In the source code of the component you can see that on the server it will just return an empty wrapper element, and only on the client, after useEffect gets triggered (after hydration) the animation starts.

I can't find anything that would be different server-side compared client-side which could cause a hydration error.

I also use it with Next.js (page directory, not the new app directory), and at least in my case things like reading cookies on both server- and client-side cause hydration errors, but it's never this package's component fault.

It would be helpful if you guys could post your nextjs version and some examples of how exactly you use the component.

caevv commented 1 year ago

Thanks for looking into it @maxeth, I found the issue for me, it was just because I was wrapping it with a <p> :O