fix: disallow superfluous elements in <html> before react hydration

TanStack · Apr 21, 2024 · 16b239f · 16b239f
1 parent 738812e
commit 16b239f
Show file tree

Hide file tree

Showing 5 changed files with 190 additions and 176 deletions.
diff --git a/app.config.mjs b/app.config.mjs
@@ -21,10 +21,10 @@ const customVite = () =>
         'react-icons',
       ],
     },
-    resolve:
-      env.command !== 'build'
-        ? {
-            dedupe: [
+    resolve: {
+      dedupe: [
+        ...(env.command !== 'build'
+          ? [
               'react',
               'react-dom',
               '@tanstack/store',
@@ -34,9 +34,10 @@ const customVite = () =>
               '@tanstack/react-cross-context',
               '@tanstack/history',
               'use-sync-external-store',
-            ],
-          }
-        : {},
+            ]
+          : []),
+      ],
+    },
     // plugins: [
     //   {
     //     name: 'inline-env-vars-as-prefix',

diff --git a/app/server.tsx b/app/server.tsx
@@ -32,24 +32,10 @@ export default eventHandler(async (event) => {
   }) as any
 
   if (import.meta.env.DEV) {
-    assets.push(
-      {
-        tag: 'script',
-        attrs: {},
-        children: `
-        // remove all script tags with src containing chrome-extension
-        document.querySelectorAll('script').forEach((script) => {
-          if (script.src.includes('chrome-extension')) {
-            script.remove()
-          }
-        })
-        `,
-      },
-      {
-        tag: 'script',
-        children: `window.__vite_plugin_react_preamble_installed__ = true`,
-      }
-    )
+    assets.push({
+      tag: 'script',
+      children: `window.__vite_plugin_react_preamble_installed__ = true`,
+    })
   }
 
   assets.push({
@@ -62,6 +48,27 @@ export default eventHandler(async (event) => {
     },
   })
 
+  assets.push({
+    tag: 'script',
+    children: `
+let htmlElement = document.documentElement;
+let childNodes = Array.from(htmlElement.childNodes);
+let removedElements = [];
+childNodes.forEach(node => {
+    if (node.nodeType === Node.ELEMENT_NODE && node.tagName !== 'HEAD' && node.tagName !== 'BODY') {
+        // Remove the node
+        removedElements.push(node);
+        htmlElement.removeChild(node);
+    }
+});
+if (removedElements.length > 0) {
+    console.warn(
+        'Removed elements from <html> to prevent hydration mismatches with React.',
+        removedElements
+    );
+}`,
+  })
+
   if (import.meta.env.DEV) {
     assets.push({
       tag: 'script',

diff --git a/media/brand.sketch b/media/brand.sketch
diff --git a/package.json b/package.json
@@ -24,10 +24,10 @@
     "@oramacloud/client": "^1.0.14",
     "@remix-run/node": "^2.8.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@tanstack/react-router": "1.28.7",
-    "@tanstack/react-router-server": "1.28.7",
-    "@tanstack/router-devtools": "1.28.7",
-    "@tanstack/router-vite-plugin": "1.28.2",
+    "@tanstack/react-router": "1.29.2",
+    "@tanstack/react-router-server": "1.29.2",
+    "@tanstack/router-devtools": "1.29.2",
+    "@tanstack/router-vite-plugin": "1.30.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vinxi/react": "0.2.2",
     "@vinxi/server-functions": "^0.3.2",
@@ -63,7 +63,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@orama/orama": "^2.0.15",
+    "@orama/orama": "^2.0.16",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
     "@types/remove-markdown": "^0.3.4",