From a20ec3cd5ea975555cb237de6a62124e9931a579 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 11 Sep 2025 14:03:45 -0600
Subject: [PATCH] Update tanstack for prod

---
 .../tanstack-devtools-impl.tsx                | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/integrations/tanstack-dev-tools/tanstack-devtools-impl.tsx b/apps/web/src/integrations/tanstack-dev-tools/tanstack-devtools-impl.tsx
index 1e4d7e9e5..e7d55a1e7 100644
--- a/apps/web/src/integrations/tanstack-dev-tools/tanstack-devtools-impl.tsx
+++ b/apps/web/src/integrations/tanstack-dev-tools/tanstack-devtools-impl.tsx
@@ -3,10 +3,20 @@ import React, { lazy, Suspense } from 'react';
 import { useMount } from '@/hooks/useMount';
 import { isServer } from '@/lib/window';
 
+const isProduction = import.meta.env.PROD;
+
 // Only create lazy components if we're in the browser
 const LazyTanstackDevtools = !import.meta.env.SSR
   ? lazy(() =>
-      import('@tanstack/react-devtools').then((mod) => ({
+      import('@tanstack/react-devtools/production').then((mod) => ({
+        default: mod.TanStackDevtools,
+      }))
+    )
+  : () => null;
+
+const LazyTanstackDevtoolsInProd = !import.meta.env.SSR
+  ? lazy(() =>
+      import('@tanstack/react-devtools/production').then((mod) => ({
         default: mod.TanStackDevtools,
       }))
     )
@@ -20,10 +30,20 @@ const LazyReactQueryDevtoolsPanel = !import.meta.env.SSR
     )
   : () => null;
 
+const LazyReactQueryDevtoolsPanelInProd = !import.meta.env.SSR
+  ? lazy(() =>
+      import('@tanstack/react-query-devtools/production').then((mod) => ({
+        default: mod.ReactQueryDevtoolsPanel,
+      }))
+    )
+  : () => null;
+
 const LazyTanStackRouterDevtoolsPanel = !import.meta.env.SSR
   ? lazy(() =>
       import('@tanstack/react-router-devtools').then((mod) => ({
-        default: mod.TanStackRouterDevtoolsPanel,
+        default: isProduction
+          ? mod.TanStackRouterDevtoolsPanelInProd
+          : mod.TanStackRouterDevtoolsPanel,
       }))
     )
   : () => null;
@@ -43,6 +63,11 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
   });
   const isServerOrSSR = isServer && import.meta.env.SSR;
 
+  const TanstackDevtools = isProduction ? LazyTanstackDevtoolsInProd : LazyTanstackDevtools;
+  const ReactQueryDevtoolsPanel = isProduction
+    ? LazyReactQueryDevtoolsPanelInProd
+    : LazyReactQueryDevtoolsPanel;
+
   if (isServerOrSSR) {
     return null;
   }
@@ -50,7 +75,7 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
   return (
     <ClientOnly>
       <Suspense fallback={null}>
-        <LazyTanstackDevtools
+        <TanstackDevtools
           config={{
             position: 'bottom-left',
             hideUntilHover: true,
@@ -61,7 +86,7 @@ const TanstackDevtoolsImpl: React.FC = React.memo(() => {
               name: 'Tanstack Query',
               render: (
                 <Suspense fallback={null}>
-                  <LazyReactQueryDevtoolsPanel />
+                  <ReactQueryDevtoolsPanel />
                 </Suspense>
               ),
             },