Hydration mismatch when wrapping <td>

[samualtnorman]

Describe the bug

When you try to write a component around <td>, you get a hydration mismatch error.

Your Example Website or App

https://github.com/samualtnorman/solid-start-bug/tree/hydration

Steps to Reproduce the Bug or Issue

1. Clone the repo
2. Switch to the hydration branch
3. Run pnpm install
4. Run pnpm dev
5. Try to load the page

Expected behavior

It not error.

Screenshots or Videos

Platform

• OS: NixOS 24.11.712512.3f0a8ac25f4
• Browser: Firefox 133.0.3
• @solidjs/meta 0.29.4
• @solidjs/router 0.15.2
• @solidjs/start 1.0.11
• solid-js 1.9.4

Additional context

No response

[ryansolid]

It is more likely this caused by accessing props.children twice than the <td> being wrapped. It is rendering the <p> element twice and only finding one.

[samualtnorman]

Oh, yeah you're right. I just tried it with a <div> instead and got the same thing. Am I misusing Solid.js in this case? Should I instead be passing in a function and calling it?
Thanks.

[ryansolid]

Yeah createMemo it or use the children helper around the props.children access. This issue has been reported a number of times now mostly linked in this issue: #1977

I'm going to close this as a duplicate but in general accessing props.children multiple times like that will render all the children multiple times so its not a good practice even without hydration and ssr.