[Bug?]: Hydration errors with streaming suspense on user click/touch

shiro commented 1 year ago

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Current behavior 😯

using streaming SSR
while at least one suspense boundary is still being resolved
hydration errors occur on user click/touch (potentially other interactions).

Happens in both dev and prod (sometimes only in one of them), leading to behaviour like the children of Suspense being empty, double rendering, node is null error, etc.

See the repro for an example.

Expected behavior 🤔

User input shouldn't break hydration.

Steps to reproduce 🕹

Steps:

using streaming SSR
add a Suspense that takes 5sec to resolve
open the page
click/touch anywhere on the page

See the repro for an example.

Context 🔦

No response

Your environment 🌎

solid-js: 1.8.5
solid-start" 0.3.8,

Edit: Pressing any key will also result in the error.

ryansolid commented 1 year ago

Thanks for reporting. We have guards to fallback to client render in these cases, but we must be missing a check somewhere.

ryansolid commented 10 months ago

Well the good news is this seems to be caused by HMR. In Prod this doesn't happen. Build the project and run start and it seems to work fine. The problem seems to be some HMR insert it is trying to do. That being said I'm hoping there is a way to fix this in dev. But I think that will have to be on the Solid Refresh/Vite side and I imagine it may be pretty tricky.

ryansolid commented 9 months ago

I categorized this wrong before. This was a minor logic error I introduced in Solid 1.8. It is fixed in Solid 1.8.15 in the linked issue.

solidjs / solid-refresh