From 91774f1db86990d3748461d7bdb62c2f2ad3ae11 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Fri, 6 Nov 2026 10:26:53 +0900
Subject: [PATCH 1/3] feat({solid,svelte}-query-devtools): add './production'
 entry to lazy load the devtools in production builds

---
 ...-svelte-query-devtools-production-entry.md |  6 +++
 docs/framework/solid/devtools.md              | 48 +++++++++++++++++++
 docs/framework/svelte/devtools.md             | 38 +++++++++++++++
 packages/solid-query-devtools/.attw.json      |  3 ++
 packages/solid-query-devtools/package.json    | 36 +++++++++-----
 .../solid-query-devtools/src/production.tsx   |  7 +++
 .../solid-query-devtools/tsdown.config.ts     | 11 ++++-
 packages/svelte-query-devtools/.attw.json     |  6 ++-
 packages/svelte-query-devtools/package.json   |  6 +++
 ...ools.svelte => SvelteQueryDevtools.svelte} |  4 +-
 packages/svelte-query-devtools/src/index.ts   |  9 +++-
 .../svelte-query-devtools/src/production.ts   |  1 +
 ....ts => SvelteQueryDevtools.svelte.test.ts} | 22 ++++++++-
 .../tests/Wrapper.svelte                      |  2 +-
 14 files changed, 179 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/solid-svelte-query-devtools-production-entry.md
 create mode 100644 packages/solid-query-devtools/.attw.json
 create mode 100644 packages/solid-query-devtools/src/production.tsx
 rename packages/svelte-query-devtools/src/{Devtools.svelte => SvelteQueryDevtools.svelte} (98%)
 create mode 100644 packages/svelte-query-devtools/src/production.ts
 rename packages/svelte-query-devtools/tests/{Devtools.svelte.test.ts => SvelteQueryDevtools.svelte.test.ts} (91%)

diff --git a/.changeset/solid-svelte-query-devtools-production-entry.md b/.changeset/solid-svelte-query-devtools-production-entry.md
new file mode 100644
index 00000000000..7e8afa3d0ab
--- /dev/null
+++ b/.changeset/solid-svelte-query-devtools-production-entry.md
@@ -0,0 +1,6 @@
+---
+'@tanstack/solid-query-devtools': minor
+'@tanstack/svelte-query-devtools': minor
+---
+
+feat({solid,svelte}-query-devtools): add './production' entry to lazy load the devtools in production builds
diff --git a/docs/framework/solid/devtools.md b/docs/framework/solid/devtools.md
index 6f79c192234..93fd3f7b9e7 100644
--- a/docs/framework/solid/devtools.md
+++ b/docs/framework/solid/devtools.md
@@ -143,3 +143,51 @@ function App() {
 - `theme?: "light" | "dark" | "system"`
   - Defaults to the theme selected in the devtools Settings menu, or `system` if none is selected.
   - Set this to change the theme of the devtools panel. This overrides the theme selected in the Settings menu.
+
+## Devtools in production
+
+Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:
+
+```tsx
+import { createSignal, lazy, onMount, Show, Suspense } from 'solid-js'
+import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
+import { Example } from './Example'
+
+const queryClient = new QueryClient()
+
+const SolidQueryDevtoolsProduction = lazy(() =>
+  import('@tanstack/solid-query-devtools/production').then((d) => ({
+    default: d.SolidQueryDevtools,
+  })),
+)
+
+function App() {
+  const [showDevtools, setShowDevtools] = createSignal(false)
+
+  onMount(() => {
+    // @ts-expect-error
+    window.toggleDevtools = () => setShowDevtools((old) => !old)
+  })
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Example />
+      <SolidQueryDevtools initialIsOpen />
+      <Show when={showDevtools()}>
+        <Suspense fallback={null}>
+          <SolidQueryDevtoolsProduction />
+        </Suspense>
+      </Show>
+    </QueryClientProvider>
+  )
+}
+
+export default App
+```
+
+With this, calling `window.toggleDevtools()` will download the devtools bundle and show them.
+
+`@tanstack/solid-query-devtools/production` also exports `SolidQueryDevtoolsPanel` for Embedded Mode.
+
+For TypeScript, you would need to set `moduleResolution` to `'bundler'`, `'node16'`, or `'nodenext'` in your tsconfig.
diff --git a/docs/framework/svelte/devtools.md b/docs/framework/svelte/devtools.md
index 5ab7a518ce4..86abe601e3d 100644
--- a/docs/framework/svelte/devtools.md
+++ b/docs/framework/svelte/devtools.md
@@ -41,6 +41,8 @@ You can import the devtools like this:
 import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 ```
 
+By default, Svelte Query Devtools are only rendered in development, using `DEV` from `esm-env`. In production, the devtools component renders nothing.
+
 ## Floating Mode
 
 Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
@@ -85,3 +87,39 @@ Place the following code as high in your Svelte app as you can. The closer it is
 - `theme?: Theme`
   - Defaults to the theme selected in the devtools Settings menu, or `system` if none is selected.
   - Set this to change the theme of the devtools panel. This overrides the theme selected in the Settings menu.
+
+## Devtools in production
+
+Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:
+
+```svelte
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+  import Example from './Example.svelte'
+
+  const queryClient = new QueryClient()
+
+  let showDevtools = $state(false)
+
+  onMount(() => {
+    // @ts-expect-error
+    window.toggleDevtools = () => (showDevtools = !showDevtools)
+  })
+</script>
+
+<QueryClientProvider client={queryClient}>
+  <Example />
+  <SvelteQueryDevtools initialIsOpen />
+  {#if showDevtools}
+    {#await import('@tanstack/svelte-query-devtools/production') then { SvelteQueryDevtools: SvelteQueryDevtoolsProduction }}
+      <SvelteQueryDevtoolsProduction />
+    {/await}
+  {/if}
+</QueryClientProvider>
+```
+
+With this, calling `window.toggleDevtools()` will download the devtools bundle and show them.
+
+For TypeScript, you would need to set `moduleResolution` to `'bundler'`, `'node16'`, or `'nodenext'` in your tsconfig.
diff --git a/packages/solid-query-devtools/.attw.json b/packages/solid-query-devtools/.attw.json
new file mode 100644
index 00000000000..de5330c3cd2
--- /dev/null
+++ b/packages/solid-query-devtools/.attw.json
@@ -0,0 +1,3 @@
+{
+  "ignoreRules": ["no-resolution"]
+}
diff --git a/packages/solid-query-devtools/package.json b/packages/solid-query-devtools/package.json
index 3ab2f3ce1d4..4909b394ceb 100644
--- a/packages/solid-query-devtools/package.json
+++ b/packages/solid-query-devtools/package.json
@@ -37,23 +37,35 @@
   "types": "./build/index.d.ts",
   "browser": {},
   "exports": {
-    "@tanstack/custom-condition": "./src/index.tsx",
-    "solid": {
-      "development": "./build/dev.jsx",
-      "import": "./build/index.jsx"
-    },
-    "development": {
+    ".": {
+      "@tanstack/custom-condition": "./src/index.tsx",
+      "solid": {
+        "development": "./build/dev.jsx",
+        "import": "./build/index.jsx"
+      },
+      "development": {
+        "import": {
+          "types": "./build/index.d.ts",
+          "default": "./build/dev.js"
+        },
+        "require": "./build/dev.cjs"
+      },
       "import": {
         "types": "./build/index.d.ts",
-        "default": "./build/dev.js"
+        "default": "./build/index.js"
       },
-      "require": "./build/dev.cjs"
+      "require": "./build/index.cjs"
     },
-    "import": {
-      "types": "./build/index.d.ts",
-      "default": "./build/index.js"
+    "./production": {
+      "@tanstack/custom-condition": "./src/production.tsx",
+      "solid": "./build/production.jsx",
+      "import": {
+        "types": "./build/production.d.ts",
+        "default": "./build/production.js"
+      },
+      "require": "./build/production.cjs"
     },
-    "require": "./build/index.cjs"
+    "./package.json": "./package.json"
   },
   "sideEffects": false,
   "files": [
diff --git a/packages/solid-query-devtools/src/production.tsx b/packages/solid-query-devtools/src/production.tsx
new file mode 100644
index 00000000000..3692bfbb77a
--- /dev/null
+++ b/packages/solid-query-devtools/src/production.tsx
@@ -0,0 +1,7 @@
+import SolidQueryDevtoolsComp from './devtools'
+import SolidQueryDevtoolsCompPanel from './devtoolsPanel'
+
+export const SolidQueryDevtools = SolidQueryDevtoolsComp
+export const SolidQueryDevtoolsPanel = SolidQueryDevtoolsCompPanel
+
+export type { DevtoolsPanelOptions } from './devtoolsPanel'
diff --git a/packages/solid-query-devtools/tsdown.config.ts b/packages/solid-query-devtools/tsdown.config.ts
index c58d4ae1321..6a764e8bc5c 100644
--- a/packages/solid-query-devtools/tsdown.config.ts
+++ b/packages/solid-query-devtools/tsdown.config.ts
@@ -55,8 +55,15 @@ const jsxConfig = (
 })
 
 export default defineConfig([
-  compiledConfig({ index: 'src/index.tsx' }, false, true),
-  jsxConfig({ index: 'src/index.tsx' }, false),
+  compiledConfig(
+    { index: 'src/index.tsx', production: 'src/production.tsx' },
+    false,
+    true,
+  ),
+  jsxConfig(
+    { index: 'src/index.tsx', production: 'src/production.tsx' },
+    false,
+  ),
   compiledConfig({ dev: 'src/index.tsx' }, true, false),
   jsxConfig({ dev: 'src/index.tsx' }, true),
 ])
diff --git a/packages/svelte-query-devtools/.attw.json b/packages/svelte-query-devtools/.attw.json
index d4b76dfa757..864f618c225 100644
--- a/packages/svelte-query-devtools/.attw.json
+++ b/packages/svelte-query-devtools/.attw.json
@@ -1,3 +1,7 @@
 {
-  "ignoreRules": ["cjs-resolves-to-esm", "internal-resolution-error"]
+  "ignoreRules": [
+    "cjs-resolves-to-esm",
+    "internal-resolution-error",
+    "no-resolution"
+  ]
 }
diff --git a/packages/svelte-query-devtools/package.json b/packages/svelte-query-devtools/package.json
index 849c7a978a6..6d82cfa61d3 100644
--- a/packages/svelte-query-devtools/package.json
+++ b/packages/svelte-query-devtools/package.json
@@ -45,6 +45,12 @@
       "svelte": "./dist/index.js",
       "import": "./dist/index.js"
     },
+    "./production": {
+      "@tanstack/custom-condition": "./src/production.ts",
+      "types": "./dist/production.d.ts",
+      "svelte": "./dist/production.js",
+      "import": "./dist/production.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
diff --git a/packages/svelte-query-devtools/src/Devtools.svelte b/packages/svelte-query-devtools/src/SvelteQueryDevtools.svelte
similarity index 98%
rename from packages/svelte-query-devtools/src/Devtools.svelte
rename to packages/svelte-query-devtools/src/SvelteQueryDevtools.svelte
index 80133231ad2..6f7817825a5 100644
--- a/packages/svelte-query-devtools/src/Devtools.svelte
+++ b/packages/svelte-query-devtools/src/SvelteQueryDevtools.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { BROWSER, DEV } from 'esm-env'
+  import { BROWSER } from 'esm-env'
   import { onlineManager, useQueryClient } from '@tanstack/svelte-query'
   import type { QueryClient } from '@tanstack/svelte-query'
   import type {
@@ -74,7 +74,7 @@
   let ref: HTMLDivElement
   let devtools = $state<TanstackQueryDevtools | undefined>(undefined)
 
-  if (DEV && BROWSER) {
+  if (BROWSER) {
     onMount(() => {
       import('@tanstack/query-devtools').then((m) => {
         const QueryDevtools = m.TanstackQueryDevtools
diff --git a/packages/svelte-query-devtools/src/index.ts b/packages/svelte-query-devtools/src/index.ts
index fb6722e9445..270884df626 100644
--- a/packages/svelte-query-devtools/src/index.ts
+++ b/packages/svelte-query-devtools/src/index.ts
@@ -1 +1,8 @@
-export { default as SvelteQueryDevtools } from './Devtools.svelte'
+import { DEV } from 'esm-env'
+import Devtools from './SvelteQueryDevtools.svelte'
+
+export const SvelteQueryDevtools: typeof Devtools = DEV
+  ? Devtools
+  : function () {
+      return {}
+    }
diff --git a/packages/svelte-query-devtools/src/production.ts b/packages/svelte-query-devtools/src/production.ts
new file mode 100644
index 00000000000..e3759ca0149
--- /dev/null
+++ b/packages/svelte-query-devtools/src/production.ts
@@ -0,0 +1 @@
+export { default as SvelteQueryDevtools } from './SvelteQueryDevtools.svelte'
diff --git a/packages/svelte-query-devtools/tests/Devtools.svelte.test.ts b/packages/svelte-query-devtools/tests/SvelteQueryDevtools.svelte.test.ts
similarity index 91%
rename from packages/svelte-query-devtools/tests/Devtools.svelte.test.ts
rename to packages/svelte-query-devtools/tests/SvelteQueryDevtools.svelte.test.ts
index d56732e28da..54e22e396b9 100644
--- a/packages/svelte-query-devtools/tests/Devtools.svelte.test.ts
+++ b/packages/svelte-query-devtools/tests/SvelteQueryDevtools.svelte.test.ts
@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { render } from '@testing-library/svelte'
 import { QueryClient } from '@tanstack/svelte-query'
-import SvelteQueryDevtools from '../src/Devtools.svelte'
+import SvelteQueryDevtools from '../src/SvelteQueryDevtools.svelte'
 import Wrapper from './Wrapper.svelte'
 import type { TanstackQueryDevtools } from '@tanstack/query-devtools'
 
@@ -187,4 +187,24 @@ describe('SvelteQueryDevtools', () => {
 
     expect(setThemeMock).toHaveBeenCalledWith('dark')
   })
+
+  it('should not export the devtools component in non-development environments', async () => {
+    vi.doMock(import('esm-env'), async (importOriginal) => ({
+      ...(await importOriginal()),
+      DEV: false,
+    }))
+    vi.resetModules()
+
+    try {
+      const { SvelteQueryDevtools: ProductionDevtools } =
+        await import('../src/index')
+      const { default: Devtools } =
+        await import('../src/SvelteQueryDevtools.svelte')
+
+      expect(ProductionDevtools).not.toBe(Devtools)
+    } finally {
+      vi.doUnmock('esm-env')
+      vi.resetModules()
+    }
+  })
 })
diff --git a/packages/svelte-query-devtools/tests/Wrapper.svelte b/packages/svelte-query-devtools/tests/Wrapper.svelte
index 35c5cf15176..894fb4ea8db 100644
--- a/packages/svelte-query-devtools/tests/Wrapper.svelte
+++ b/packages/svelte-query-devtools/tests/Wrapper.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { QueryClientProvider } from '@tanstack/svelte-query'
-  import SvelteQueryDevtools from '../src/Devtools.svelte'
+  import SvelteQueryDevtools from '../src/SvelteQueryDevtools.svelte'
   import type { QueryClient } from '@tanstack/svelte-query'
 
   type Props = {

From b0eb8693bfe197ca891d91a1d5025fd03424ac37 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Fri, 6 Nov 2026 10:33:01 +0900
Subject: [PATCH 2/3] docs(framework/{solid,svelte}/devtools): replace
 '@ts-expect-error' with 'Object.assign' in production lazy load example

---
 docs/framework/solid/devtools.md  | 5 +++--
 docs/framework/svelte/devtools.md | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/framework/solid/devtools.md b/docs/framework/solid/devtools.md
index 93fd3f7b9e7..59419e65b09 100644
--- a/docs/framework/solid/devtools.md
+++ b/docs/framework/solid/devtools.md
@@ -166,8 +166,9 @@ function App() {
   const [showDevtools, setShowDevtools] = createSignal(false)
 
   onMount(() => {
-    // @ts-expect-error
-    window.toggleDevtools = () => setShowDevtools((old) => !old)
+    Object.assign(window, {
+      toggleDevtools: () => setShowDevtools((old) => !old),
+    })
   })
 
   return (
diff --git a/docs/framework/svelte/devtools.md b/docs/framework/svelte/devtools.md
index 86abe601e3d..fcbcbf429a1 100644
--- a/docs/framework/svelte/devtools.md
+++ b/docs/framework/svelte/devtools.md
@@ -104,8 +104,9 @@ Devtools are excluded in production builds. However, it might be desirable to la
   let showDevtools = $state(false)
 
   onMount(() => {
-    // @ts-expect-error
-    window.toggleDevtools = () => (showDevtools = !showDevtools)
+    Object.assign(window, {
+      toggleDevtools: () => (showDevtools = !showDevtools),
+    })
   })
 </script>
 

From 283bc531c2afae63df52eaf318d1a9c23d5bd796 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Fri, 6 Nov 2026 11:00:46 +0900
Subject: [PATCH 3/3] fix(svelte-query-devtools): type 'SvelteQueryDevtools' as
 'Component' so plain 'tsc' accepts the non-development fallback

---
 packages/svelte-query-devtools/src/index.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/svelte-query-devtools/src/index.ts b/packages/svelte-query-devtools/src/index.ts
index 270884df626..cbd02b352d4 100644
--- a/packages/svelte-query-devtools/src/index.ts
+++ b/packages/svelte-query-devtools/src/index.ts
@@ -1,8 +1,10 @@
 import { DEV } from 'esm-env'
 import Devtools from './SvelteQueryDevtools.svelte'
+import type { Component, ComponentProps } from 'svelte'
 
-export const SvelteQueryDevtools: typeof Devtools = DEV
-  ? Devtools
-  : function () {
-      return {}
-    }
+export const SvelteQueryDevtools: Component<ComponentProps<typeof Devtools>> =
+  DEV
+    ? Devtools
+    : function () {
+        return {}
+      }