solidjs / solidjs/solid-vite-plugin
Retain $ServerOnly templates while HMR is active
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 520
- Forks
- 70
- Avg merge
- 23h 35m
- Merged PRs (30d)
- 39
Description
Summary
When an SSR application uses $ServerOnly on a component's root JSX element, the initial render and hydration succeed, but the first HMR update throws and leaves stale DOM.
babel-plugin-jsx-dom-expressions@0.40.10 now defaults omitServerOnlyTemplates to true. During a client HMR re-evaluation, Solid Refresh calls the component outside the initial hydration pass, but the compiled component only calls getNextElement() and has no retained template.
Because vite-plugin-solid already determines needHmr, could it default omitServerOnlyTemplates to false for client transforms while HMR is active? An explicit user setting should presumably continue to win.
Reproduction
https://github.com/birkskyum/repro-solid-server-only-hmr
git clone https://github.com/birkskyum/repro-solid-server-only-hmr.git
cd repro-solid-server-only-hmr
pnpm install
pnpm dev
- Open http://localhost:4174.
- Change
edit me!insrc/App.tsxand save.
Actual
The DOM does not update, and the HMR evaluation throws:
TypeError: template is not a function
at getNextElement (.../solid-js/web/dist/dev.js)
at _$getNextElement (src/App.tsx)
at HMRComp.createMemo.name [as fn] (@solid-refresh)
Expected
The component hot-updates normally.
Control / proposed direction
The exact same edit succeeds when the compiler option is set explicitly:
solid({
ssr: true,
solid: { omitServerOnlyTemplates: false },
})
This appears to be needed only for the client transform when HMR is enabled; server and production transforms can keep omitting the template.
Versions
solid-js@1.9.15vite-plugin-solid@2.11.14babel-preset-solid@1.9.15babel-plugin-jsx-dom-expressions@0.40.10vite@8.2.1
Downstream report: https://github.com/solidjs/solid-start/issues/1930
Relevant dom-expressions change: https://github.com/ryansolid/dom-expressions/commit/3774c790a9c3c8e2b2f2984f36be002ac612df34
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the failure with the linked repro using pnpm install and pnpm dev, then edit src/App.tsx. Start in the client transform path that computes needHmr and compare its compiler options with the explicit omitServerOnlyTemplates setting. Done means HMR updates the DOM without the template error while an explicit user setting still takes precedence.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- babel, typescript, vite
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100