solidjs / solidjs/solid-vite-plugin

Retain $ServerOnly templates while HMR is active

Open
#308 0 comments 0 reactions 0 assignees View on GitHub

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
  1. Open http://localhost:4174.
  2. Change edit me! in src/App.tsx and 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.15
  • vite-plugin-solid@2.11.14
  • babel-preset-solid@1.9.15
  • babel-plugin-jsx-dom-expressions@0.40.10
  • vite@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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.