fix: Don't hydrate html

tannerlinsley · tannerlinsley · commit 4d6ec9ba12b7 · 2024-05-15T09:49:38.000-07:00
diff --git a/app/client.tsx b/app/client.tsx
@@ -5,4 +5,5 @@ import './utils/sentry'
 
 const router = createRouter()
 
-hydrateRoot(document, <StartClient router={router} />)
+// hydrateRoot(document, <StartClient router={router} />)
+hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)
diff --git a/app/routes/__root.tsx b/app/routes/__root.tsx
@@ -13,7 +13,14 @@ import appCss from '~/styles/app.css?url'
 import carbonStyles from '~/styles/carbon.css?url'
 import { seo } from '~/utils/seo'
 import ogImage from '~/images/og.png'
-import { RouterManagedTag, Scripts, Meta } from '@tanstack/start'
+import {
+  RouterManagedTag,
+  Scripts,
+  Meta,
+  Html,
+  Head,
+  Body,
+} from '@tanstack/start'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 import { NotFound } from '~/components/NotFound'
 import { CgSpinner } from 'react-icons/cg'
@@ -142,14 +149,14 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   const showDevtools = showLoading && isRouterPage
 
   return (
-    <html lang="en">
-      <head>
+    <Html lang="en">
+      <Head>
         <Meta />
         {matches.find((d) => d.staticData?.baseParent) ? (
           <base target="_parent" />
         ) : null}
-      </head>
-      <body>
+      </Head>
+      <Body>
         <SpeedInsights />
         <Analytics />
         <React.Suspense fallback={null}>{children}</React.Suspense>
@@ -179,7 +186,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         ) : null}
         <ScrollRestoration />
         <Scripts />
-      </body>
-    </html>
+      </Body>
+    </Html>
   )
 }
