fix issue with window not defined (#103)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/ripe-ravens-read.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+add peer dep to devtools

.changeset/thin-singers-retire.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+fix issue with window not defined

examples/react/basic/src/setup.tsx

@@ -72,6 +72,10 @@ export default function DevtoolsExample() {
             name: 'TanStack Router',
             render: <TanStackRouterDevtoolsPanel router={router} />,
           },
+          /* {
+            name: "The actual app",
+            render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
+          } */
         ]}
       />
       <RouterProvider router={router} />

examples/react/drizzle/package.json

@@ -24,6 +24,7 @@
     "drizzle-orm": "^0.44.4",
     "pg": "^8.16.3",
     "typescript": "5.8.3",
-    "vite": "^7.0.6"
+    "vite": "^7.0.6",
+    "vite-plugin-inspect": "11.3.2"
   }
 }

examples/react/drizzle/vite.config.ts

@@ -1,10 +1,11 @@
 import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import { defineConfig } from 'vite'
 import { devtools } from '@tanstack/devtools-vite'
+import Inspect from 'vite-plugin-inspect'
 
 export default defineConfig({
   server: {
     port: 3000,
   },
-  plugins: [devtools() as any, tanstackStart()],
+  plugins: [devtools() as any, tanstackStart(), Inspect()],
 })

examples/react/start/package.json

@@ -7,7 +7,7 @@
     "start": "node .output/server/index.mjs",
     "serve": "vite preview",
     "test": "vitest run",
-    "preview": "vite preview",
+    "preview": "vite build && vite preview",
     "db:migrate": "prisma migrate dev --name init",
     "db:reset": " prisma migrate reset",
     "db:gen": "prisma generate",
@@ -45,6 +45,7 @@
     "jsdom": "^26.1.0",
     "typescript": "5.8.3",
     "vite": "^7.0.6",
+    "vite-plugin-inspect": "11.3.2",
     "vitest": "^3.1.2",
     "web-vitals": "^4.2.4"
   }

examples/react/start/vite.config.ts

@@ -4,7 +4,7 @@ import viteReact from '@vitejs/plugin-react'
 import viteTsConfigPaths from 'vite-tsconfig-paths'
 import tailwindcss from '@tailwindcss/vite'
 import { devtools } from '@tanstack/devtools-vite'
-//import { devtoolsServer } from './src/server-setup'
+import Inspect from 'vite-plugin-inspect'
 
 const config = defineConfig({
   plugins: [
@@ -20,7 +20,7 @@ const config = defineConfig({
     viteTsConfigPaths({
       projects: ['./tsconfig.json'],
     }),
-
+    Inspect(),
     tailwindcss(),
     tanstackStart({
       customViteReactPlugin: true,

packages/devtools/package.json

@@ -56,6 +56,7 @@
     "solid-js": "^1.9.7"
   },
   "peerDependencies": {
+    "@tanstack/devtools-ui": "workspace:*",
     "solid-js": ">=1.9.7"
   },
   "devDependencies": {

packages/devtools/src/context/devtools-store.ts

@@ -80,9 +80,11 @@ export const initialState: DevtoolsStore = {
     openHotkey: ['Shift', 'A'],
     requireUrlFlag: false,
     urlFlag: 'tanstack-devtools',
-    theme: window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light',
+    theme:
+      typeof window !== 'undefined' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light',
   },
   state: {
     activeTab: 'plugins',