Vite HMR blank page when editing `__root.tsx` (Solid SSR)

[yanghuidong]

Which project does this relate to?

Router

Describe the bug

Editing __root.tsx triggers HMR but renders blank page with client error:

Warning: template2 is not a function

Server-side stack trace:

RunnerError
  at reviveInvokeError (vite/dist/node/module-runner.js:476:64)
  at Object.invoke (vite/dist/node/module-runner.js:549:11)
  at ModuleRunner.getModuleInformation (vite/dist/node/module-runner.js:1086:7)
  at request (vite/dist/node/module-runner.js:1103:83)
  at /src/routeTree.gen.ts:11:1              ← import { Route as rootRouteImport } from './routes/__root'
  at ESModulesEvaluator.runInlinedModule (vite/dist/node/module-runner.js:913:3)
  at ModuleRunner.directRequest (vite/dist/node/module-runner.js:1146:59)
  at ModuleRunner.cachedRequest (vite/dist/node/module-runner.js:1053:73)
  at /src/router.tsx:4:1                           ← import { routeTree } from '~/routeTree.gen'
  at ESModulesEvaluator.runInlinedModule (vite/dist/node/module-runner.js:913:3)

status: 500

HMR works correctly on all other route files.

Your Example Website or App

n/a

Steps to Reproduce the Bug or Issue

1. Create TanStack Start (Solid) app
2. pnpm dev
3. Edit __root.tsx (e.g. change some text)
4. Observe: Blank page, console shows template2 is not a function
5. Compare: Edit index.tsx → HMR works fine

Expected behavior

Expected: Either successful HMR or graceful full reload
Actual: Blank page requiring manual refresh

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.145.11
• OS: macOS
• Browser: Chrome
• Browser Version: 144.0
• Bundler: Vite
• Bundler Version: 7.3.0

Additional context

No response

[brenelz]

Do you have a reproduction project. It seems like HMR isn't reloading for __root but its not showing a blank page an erroring either.

Also do you know if the react version works?

pnpx create-start-app --framework solid

[yanghuidong]

@brenelz yeah, with a minimal setup, I don't see the page turning blank anymore, after saving changes to __root.tsx.

But, I do see that the title turns blank. In the example code, the document has a title set via head(), but after modifying __root.tsx, the <title> tag gets removed from DOM, which suggests that there's some reloading or re-execution going on.

Interestingly, after the first edit, the page content does get updated, i.e. HMR works partially (with a broken title); but, any subsequent edits can no longer trigger any content update.

And again, the browser console consistently logs the warning message from Solid:

@solid-refresh:128 Warning: template2 is not a function
warning @ tiny-warning.esm.js?v=8d35ec39:9
onCatch @ Matches.jsx:65
fallback @ CatchBoundary.jsx:15
(anonymous) @ chunk-C2GCMIFK.js?v=8d35ec39:1583
untrack @ chunk-C2GCMIFK.js?v=8d35ec39:462
ErrorBoundary.createMemo.name @ chunk-C2GCMIFK.js?v=8d35ec39:1583
runComputation @ chunk-C2GCMIFK.js?v=8d35ec39:734
updateComputation @ chunk-C2GCMIFK.js?v=8d35ec39:717
runTop @ chunk-C2GCMIFK.js?v=8d35ec39:827
runQueue @ chunk-C2GCMIFK.js?v=8d35ec39:901
completeUpdates @ chunk-C2GCMIFK.js?v=8d35ec39:856
runUpdates @ chunk-C2GCMIFK.js?v=8d35ec39:845
completeUpdates @ chunk-C2GCMIFK.js?v=8d35ec39:896
runUpdates @ chunk-C2GCMIFK.js?v=8d35ec39:845
writeSignal @ chunk-C2GCMIFK.js?v=8d35ec39:690
setter @ chunk-C2GCMIFK.js?v=8d35ec39:224
patchComponent @ @solid-refresh:128
patchComponents @ @solid-refresh:147
patchRegistry @ @solid-refresh:190
...

[yanghuidong]

Also do you know if the react version works?

@brenelz just added a minimal react example similar to the solid one, and yes, react hmr works when modifying __root.tsx!

[brenelz]

Ok I think I have a fix. Can you add this at the top of __root.tsx?

// @refresh reload

Ii noticed it does it in solid start for the entry files

https://github.com/solidjs/solid-start/blob/main/apps/fixtures/basic/src/entry-server.tsx

[yanghuidong]

Just tried your found @brenelz and it worked pretty well; it forces a page reload on file change. The dev server consoles prints the following info btw:

3:53:08 PM [vite] (client) hmr update /src/tailwind.css?direct, /src/routes/__root.tsx
3:53:08 PM [vite] (ssr) page reload src/routes/__root.tsx
3:53:08 PM [vite] (client) hmr invalidate /src/routes/__root.tsx
3:53:08 PM [vite] (client) page reload src/routes/__root.tsx
3:53:19 PM [vite] (client) hmr update /src/tailwind.css?direct, /src/routes/__root.tsx
3:53:19 PM [vite] (ssr) page reload src/routes/__root.tsx
3:53:19 PM [vite] (client) hmr invalidate /src/routes/__root.tsx
3:53:19 PM [vite] (client) page reload src/routes/__root.tsx

But ideally, Solid's behavior when working with Vite HMR can catch up with React.