From 8be5b62aa9a82ebfc0524ce6c0f9a35776b021c2 Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Mon, 3 Feb 2025 17:12:31 +1300
Subject: [PATCH 1/2] fix(start-router-manifest): change code snippet to ALWAYS
 have HMR ready in development

---
 packages/start-router-manifest/src/index.ts | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/start-router-manifest/src/index.ts b/packages/start-router-manifest/src/index.ts
index b907916c36..9c03f9ca34 100644
--- a/packages/start-router-manifest/src/index.ts
+++ b/packages/start-router-manifest/src/index.ts
@@ -3,6 +3,10 @@ import tsrGetManifest from 'tsr:routes-manifest'
 import { getManifest } from 'vinxi/manifest'
 import type { Manifest } from '@tanstack/react-router'
 
+function sanitizeBase(base: string) {
+  return base.replace(/^\/|\/$/g, '')
+}
+
 /**
  * @description Returns the full, unfiltered router manifest. This includes relationships
  * between routes, assets, and preloads and is NOT what you want to serialize and
@@ -18,9 +22,22 @@ export function getFullRouterManifest() {
 
   // Always fake that HMR is ready
   if (process.env.NODE_ENV === 'development') {
+    const CLIENT_BASE = sanitizeBase(process.env.TSS_CLIENT_BASE || '')
+
+    if (!CLIENT_BASE) {
+      throw new Error(
+        'tanstack/start-router-manifest: TSS_CLIENT_BASE must be defined in your environment for getFullRouterManifest()',
+      )
+    }
+
     rootRoute.assets.push({
       tag: 'script',
-      children: `window.__vite_plugin_react_preamble_installed__ = true`,
+      attrs: { type: 'module' },
+      children: `import RefreshRuntime from "/${CLIENT_BASE}/@react-refresh";
+RefreshRuntime.injectIntoGlobalHook(window)
+window.$RefreshReg$ = () => {}
+window.$RefreshSig$ = () => (type) => type
+window.__vite_plugin_react_preamble_installed__ = true`,
     })
   }
 

From 5a45917e4ecf28d6a75f9af42c4c3dd77fc07a64 Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Mon, 3 Feb 2025 17:22:23 +1300
Subject: [PATCH 2/2] test(e2e): add dev component to mess around with HMR

---
 e2e/start/basic/app/components/CustomMessage.tsx | 10 ++++++++++
 e2e/start/basic/app/routes/index.tsx             |  2 ++
 2 files changed, 12 insertions(+)
 create mode 100644 e2e/start/basic/app/components/CustomMessage.tsx

diff --git a/e2e/start/basic/app/components/CustomMessage.tsx b/e2e/start/basic/app/components/CustomMessage.tsx
new file mode 100644
index 0000000000..d00e4eac60
--- /dev/null
+++ b/e2e/start/basic/app/components/CustomMessage.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+export function CustomMessage({ message }: { message: string }) {
+  return (
+    <div className="py-2">
+      <div className="italic">This is a custom message:</div>
+      <p>{message}</p>
+    </div>
+  )
+}
diff --git a/e2e/start/basic/app/routes/index.tsx b/e2e/start/basic/app/routes/index.tsx
index 09a907cb18..37169a78b4 100644
--- a/e2e/start/basic/app/routes/index.tsx
+++ b/e2e/start/basic/app/routes/index.tsx
@@ -1,4 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
+import { CustomMessage } from '~/components/CustomMessage'
 
 export const Route = createFileRoute('/')({
   component: Home,
@@ -8,6 +9,7 @@ function Home() {
   return (
     <div className="p-2">
       <h3>Welcome Home!!!</h3>
+      <CustomMessage message="Hello from a custom component!" />
     </div>
   )
 }