Repository navigation
Hydration bug with children and spread props after updating to v1.5 #1188
Description
Describe the bug
It seems hydration is broken using this pattern:
const [l, p] = splitProps(props, ["children"]);
<div {...p}>
{l.children}
<div></div>
</div>Error:
TypeError: Cannot read properties of null (reading 'nextSibling')
Your Example Website or App
Steps to Reproduce the Bug or Issue
- Run npm run dev
- See console error
- Notice that component is throwing an error that is being handled by
ErrorBoundary
Expected behavior
Component not throwing an error after hydration.
It should render the same way it came from the server.
Screenshots or Videos
No response
Platform
- OS: Linux
- Browser: Chrome
- Version: 104.0
Additional context
No response
Activity
kevintakeda commentedon Aug 28, 2022
More reproductions of probably the same bug:
It adds the dynamic element classes to the child element after hydration (no error):
https://stackblitz.com/edit/vitejs-vite-tr1jqj?file=src/App.tsx
It loses reactivity after hydration (no error):
https://stackblitz.com/edit/vitejs-vite-apaj3a?file=src/App.tsx
For loop not rendering children (no error)
https://stackblitz.com/edit/vitejs-vite-ujdxf3?file=src/App.tsx
ryansolid commentedon Aug 28, 2022
Thanks. I will investigate. The cool thing in 1.5 is that the split props stuff shouldn't be necessary anymore.. You should be able to just spread now.
Edit: Seems broken too. Ok let me see what's going on.
ryansolid commentedon Aug 29, 2022
Yeah these seem to all be the same issue. Try 1.5.2 which should have the fix.
fix solidjs#1186, fix solidjs#1188, fix#1189, fix solidjs#1190, fix s…