#Hydration error that seems to be out of my control, any ideas?

10 messages · Page 1 of 1 (latest)

violet oar
#

There's no variable data, no runtime randomness, just pure confusion. Trying out the next and react 19 rc with compiler
definition: ```tsx
'use client';

export default function Typewriter({ text }) {
return (
<>
<span className="whitespace-pre-line">{text.substring(0, 0)}</span>
<span className="whitespace-pre-line text-transparent">{text.substring(0)}</span>
</>
);
}call site (also a client component):tsx
<Typewriter text={'Hi.\nWelcome to my portfolio.'} />

image.png
uneven jasperBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

violet oar
#

Not sure if this is even a next problem, but since it's SSR, it feels more appropriate to mention it here than with React themselves

minor wasp
#

~~maybe <span> can not contain another <span>~~i misread your uploads mb

violet oar
#

Actually this might be a react-compiler problem, though certainly a confusing one

#

gonna keep this open for posterity and open an issue there

#

(note that this still might be nextjs, since SSR, but I do sincerely have no idea)

violet oar
uneven jasperBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1245242393951862805 message)

violet oar
#

I'll note that the reason it was a hydration error is that the server bundle for next doesn't use the compiler even when enabled