[TanStack Start] HMR is not working from root route (__root)

[iamchanii]

Describe the bug

HMR is not working in root route. only working from normal routes.

Your Example Website or App

https://github.com/TanStack/router/tree/main/examples/react/start-basic-rsc

Steps to Reproduce the Bug or Issue

1. Clone (or copy or degit) start-basic-rsc example, install dependencies and run dev server.
2. Open http://localhost:3000
3. Try to edit from __root.tsx. I just added a link beside Home.

Expected behavior

In terminal, dev server printed a log about page has reloaded.

[vite] page reload app/routes/__root.tsx

but the changes are not reflected in the browser.

Screenshots or Videos

2024-07-19.19.22.35.mov

Platform

• OS: macOs
• Browser: Arc / Chrome
• Version: 126.0.6478.127

Additional context

No response

[anulman]

I'm experiencing this as well, not just in my root route but in any top-level route.

I also have not been able to separate out components/Foo.tsx files and have them hot-reload. The dev console & JS console confirm the HMR event has been emitted and received, but the React JS—even for route sub-components modified in non-route files (e.g. import { FooPage } from '~/components/FooPage';) does not re-render the HMR'ed component.

[ChrisEdgington]

We just added TanStack router to our vite-based project, and now we are also experiencing this HMR failure. I tried a few different routes, it does seem to only be happening with __root.tsx.

[KiwiKilian]

To summarize, we see the following HMR problems with file based routing:

HMR is not triggered when editing

• routes/__root.tsx
• components/Example.tsx imported into any routes/**.tsx file
• routes/_layout.tsx

HMR is triggered when editing

• routes/index.tsx
• routes/example.example.tsx (@anulman are you sure this doesn't work for any plain route (no _ prefix) file?)
• routes/with-directory/example.tsx

Reproduction

All of this can be testet with the Start Basic StackBlitz. Create a new File app/components/Example.tsx:

export function Example() {
  return <h1>Changing this will not trigger HMR</h1>
}

Now import this into app/routes/index.tsx and render <Example />:

import { createFileRoute } from '@tanstack/react-router'
import { Example } from '~/components/Example'

export const Route = createFileRoute('/')({
  component: Home,
})

function Home() {
  return (
    <div className="p-2">
      <h3>Welcome Home!!!</h3>
      <Example />
    </div>
  )
}

While editing "Welcome Home!!!" will trigger HMR, editing "Changing this will not trigger HMR" will not. The latter shows

[vite] hmr update /app/components/Example.tsx

in the console, but a manual reload is necessary.

[rin-yato]

Having the same problem for routes/page-a/-component/example.tsx

[jwtong]

Bump, this happens on routes at random

[schiller-manuel]

can you please test out the package built for this PR whether it fixes the HMR issues you are experiencing: #2286 (comment)

[jwtong]

can you please test out the package built for this PR whether it fixes the HMR issues you are experiencing: #2286 (comment)

"@tanstack/router": "github:lithdew/router#main"

Installed as above, still had the same issue though. Updates to pages don't hot reload.

[jwtong]

Hmm, yeah looks like I'm not sure how to install your forked version to @tanstack/react-router.

[KiwiKilian]

@schiller-manuel I've tried both #2286 and #2316. Both seem to fix the problem in their current state.

@jwtong make sure to unfold the instructions in the comments on how to install from a pr. You can either use install/add with your prefered package manager or change the version in your package.json to the URL provided. E.g. testing the #2316 looks like this in our package.json:

    "@tanstack/react-router": "https://pkg.pr.new/@tanstack/react-router@2316",
    "@tanstack/react-router-with-query": "https://pkg.pr.new/@tanstack/react-router-with-query@2316",
    "@tanstack/start": "https://pkg.pr.new/@tanstack/start@2316",

Make sure all @tanstack packages use the same "version" (rather now PR URL).

[jwtong]

@KiwiKilian @schiller-manuel

Tested both #2286 and #2316.

For me, it did not resolve the issue. If I edit a route file (e.g. apps/web/src/routes/_auth._nav.member.clients.index.tsx), I'm still not seeing updates until I refresh the page.

I tested by just adding content inside a <div>Hello</div>

[KiwiKilian]

It works for me on #2316 (version 1.58.5 and hash 684eef6) when editing app/routes/_authenticated.index.tsx like just adding some text or changing.

[pedrobzz]

none of those fixed my issue. I'm not using tanstack start, only tanstack router, but i have the exact same problem

[MarkSFrancis]

For anyone reading this who's looking for a workaround until a fix is merged, you can add the following to your __root.tsx to enable HMR in Tanstack Start:

export const Route = createRootRoute({
  // Other route props like the component
  // ...
  //
  scripts: () =>
    import.meta.env.DEV
      ? [
          {
            type: 'module',
            children: `import RefreshRuntime from "/_build/@react-refresh";
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type`,
          },
        ]
      : [],
});

This does the same thing as #2286 and #2316 (albeit in a slightly more hacky way). Once the fix is merged, you should be able to safely remove this code from your __root.tsx again

[cameronb23]

@MarkSFrancis Lifesaver, been trying to work Start into a side project of mine and was pretty sad about the HMR (but its alpha so who cares). A great fix for now until the team gets it going!