fix: entry.client not using the new hydrateRoot

[cezarneaga]

i just saw that the indie-stack has react 18.0.0 but the entry.client was using old hydrate. Not sure if this was on purpose but on discord I was told to send a PR nonetheless.

I looked at server.entry and thought of adding renderToReadableStream but I think this might have more implications than I understand about remix's choices.

[rzmz]

Can you test this in latest Safari? I get a white page and bunch of errors in console when changing my entry.client.tsx to use hydrateRoot without any other changes.
Correction: the Indie stack front page flashes briefly and then it is all white page...

[kentcdodds]

Oh, nice! I tried it and thought TypeScript hadn't been updated yet because it wasn't working. Turns out I forgot to pull it from react-dom/client 😅

Thanks!

[kentcdodds]

Would you be interested in doing this for the Blues/Grunge stacks as well?

[kentcdodds]

Can you test this in latest Safari?

I just tested and it's working fine for me.

[kentcdodds]

Unfortunately I had to revert this PR because it failed CI: https://github.com/remix-run/indie-stack/runs/5773745947?check_suite_focus=true

My bad for merging it before checking, but it looks like the Cypress test failed. I'm afraid I don't have the bandwidth to look into why right now.

[rphlmr]

Hi, same issue on my stack : Hydration failed because the initial UI does not match what was rendered on the server.
Still looking why :D

[rphlmr]

More details :

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

The above error occurred in the component:
at RemixBrowser (...3275:27)

line 3275 is :

function RemixBrowser(_props) {
  let historyRef = React4.useRef();

Appears only on Cypress, so, maybe we need to wait ?

[cezarneaga]

Works indeed only locally

[rphlmr]

Works indeed only locally

It only works with NODE_ENV=development after trying to run cypress test.
Strange behaviour

[rphlmr]

In case of : remix-run/remix#2570

I closed it because It's not reproducible every time in my machine.