update configs

apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools-impl.tsx

@@ -1,29 +1,39 @@
 import { ClientOnly } from '@tanstack/react-router';
+import type React from 'react';
 import { lazy, Suspense } from 'react';
 
-const LazyTanstackDevtools = lazy(() =>
-  import('@tanstack/react-devtools').then((mod) => ({
-    default: mod.TanStackDevtools,
-  }))
-);
+// Only create lazy components if we're in the browser
+const LazyTanstackDevtools = !import.meta.env.SSR
+  ? lazy(() =>
+      import('@tanstack/react-devtools').then((mod) => ({
+        default: mod.TanStackDevtools,
+      }))
+    )
+  : () => null;
 
-const LazyReactQueryDevtoolsPanel = lazy(() =>
-  import('@tanstack/react-query-devtools').then((mod) => ({
-    default: mod.ReactQueryDevtoolsPanel,
-  }))
-);
+const LazyReactQueryDevtoolsPanel = !import.meta.env.SSR
+  ? lazy(() =>
+      import('@tanstack/react-query-devtools').then((mod) => ({
+        default: mod.ReactQueryDevtoolsPanel,
+      }))
+    )
+  : () => null;
 
-const LazyTanStackRouterDevtoolsPanel = lazy(() =>
-  import('@tanstack/react-router-devtools').then((mod) => ({
-    default: mod.TanStackRouterDevtoolsPanel,
-  }))
-);
+const LazyTanStackRouterDevtoolsPanel = !import.meta.env.SSR
+  ? lazy(() =>
+      import('@tanstack/react-router-devtools').then((mod) => ({
+        default: mod.TanStackRouterDevtoolsPanel,
+      }))
+    )
+  : () => null;
 
-const LazyMetricStoreDevtools = lazy(() =>
-  import('./metric-store-devtools').then((mod) => ({
-    default: mod.default,
-  }))
-);
+const LazyMetricStoreDevtools = !import.meta.env.SSR
+  ? lazy(() =>
+      import('./metric-store-devtools').then((mod) => ({
+        default: mod.default,
+      }))
+    )
+  : () => null;
 
 // The actual devtools component implementation
 const TanstackDevtoolsImpl: React.FC = () => {

apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools.tsx

@@ -7,12 +7,14 @@ import { isServer } from '@/lib/window';
 const ENABLE_TANSTACK_PANEL =
   (process.env.VITE_ENABLE_TANSTACK_PANEL === 'true' || isDev) && !isServer;
 
-// Lazy load the actual devtools component
-// const LazyTanstackDevtools = lazy(() =>
-//   import('./tanstack-devtools-impl').then((mod) => ({
-//     default: mod.default,
-//   }))
-// );
+// Lazy load the actual devtools component - only if not SSR
+const LazyTanstackDevtools = !isServer
+  ? lazy(() =>
+      import('./tanstack-devtools-impl').then((mod) => ({
+        default: mod.default,
+      }))
+    )
+  : () => null;
 
 // Export component with Suspense wrapper
 export const TanstackDevtools: React.FC = React.memo(() => {
@@ -39,10 +41,9 @@ export const TanstackDevtools: React.FC = React.memo(() => {
 
   return (
     <ClientOnly>
-      <div>SWAG</div>
-      {/* <Suspense fallback={null}>
+      <Suspense fallback={null}>
         <LazyTanstackDevtools />
-      </Suspense> */}
+      </Suspense>
     </ClientOnly>
   );
 });

apps/web-tss/vite.config.ts

@@ -5,7 +5,7 @@ import { defineConfig } from 'vite';
 import checker from 'vite-plugin-checker';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 
-const config = defineConfig(({ command, mode }) => {
+const config = defineConfig(({ command, mode, isSsrBuild }) => {
   const isBuild = command === 'build';
   const isProduction = mode === 'production';
   const isTypecheck = process.argv.includes('--typecheck') || process.env.TYPECHECK === 'true';
@@ -14,6 +14,18 @@ const config = defineConfig(({ command, mode }) => {
 
   return {
     server: { port: 3000 },
+    ssr: {
+      noExternal: isSsrBuild ? [] : undefined,
+      external: isSsrBuild
+        ? [
+            '@tanstack/devtools',
+            '@tanstack/react-devtools',
+            '@tanstack/react-query-devtools',
+            '@tanstack/react-router-devtools',
+            'solid-js',
+          ]
+        : undefined,
+    },
     plugins: [
       // this is the plugin that enables path aliases
       viteTsConfigPaths({ projects: ['./tsconfig.json'] }),