solidjs
Child textContent within label removed after hydration
Describe the bug
The title says it.
With standard client side rendering, rendering out a radio group with input and label's, the child textContent (a hardcoded string) is rendered as expected. When pre-rendering + hydrating, the hydration step seems to remove the child of the label.
Your Example Website or App
https://github.com/chrstntdd/solid-1.5-possible-regression
Steps to Reproduce the Bug or Issue
- Run the application in development (client side rendered) with
pnpm dev - View the application in a browser
- Observe the radio group is rendered correctly
- Build the application for production (pre-render) with
pnpm build - Serve the application with
pnpm preview - View the application in a browser
- Observe the labels of the radio group have content in the initial HTML
- Observe the labels of the radio group lack content once hydration has finished
Expected behavior
The hydration step should not remove static textContent of the label.
Screenshots or Videos
No response
Platform
- OS: MacOS 11.6
- Browser: All
- Version: 1.5.X
Additional context
It's stated in the readme of the repro case, but this bug surfaced when upgrading from solid 1.4.7 to 1.5.X.
Hmm.. all cases data-hk are being removed which suggests hydration was never working properly. Thanks for the reproduction. I will see what we can find.
Looking at the example I was correct. It wasn't hydrating as it was doing a client-only compilation (both client and server builds need to be set to hydratable). Fixed it by changing your vite config to:
export default defineConfig(({ mode }) => {
let isSSG = mode === 'ssg';
return {
plugins: [
solid(
isSSG
? { ssr: true, solid: { hydratable: true, generate: 'ssr' } }
: { solid: { hydratable: true } }
),
],
build: { manifest: !isSSG, minify: false },
server: { port: 3000 },
};
});