fix(solid-query-devtools): client-side code executing on server, breaking UI

packages/solid-query-devtools/src/clientOnly.tsx

@@ -0,0 +1,43 @@
+import {
+  createMemo,
+  createSignal,
+  onMount,
+  sharedConfig,
+  splitProps,
+  untrack,
+} from 'solid-js'
+import { isServer } from 'solid-js/web'
+import type { Component, ComponentProps, JSX } from 'solid-js'
+
+/*
+  This function has been taken from solid-start's codebase
+  This allows the devtools to be loaded only on the client and bypasses any server side rendering
+  https://github.com/solidjs/solid-start/blob/2967fc2db3f0df826f061020231dbdafdfa0746b/packages/start/islands/clientOnly.tsx
+*/
+export default function clientOnly<T extends Component<any>>(
+  fn: () => Promise<{
+    default: T
+  }>,
+) {
+  if (isServer)
+    return (props: ComponentProps<T> & { fallback?: JSX.Element }) =>
+      props.fallback
+
+  const [comp, setComp] = createSignal<T>()
+  fn().then((m) => setComp(() => m.default))
+  return (props: ComponentProps<T>) => {
+    let Comp: T | undefined
+    let m: boolean
+    const [, rest] = splitProps(props, ['fallback'])
+    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest)
+    const [mounted, setMounted] = createSignal(!sharedConfig.context)
+    onMount(() => setMounted(true))
+    return createMemo(
+      () => (
+        (Comp = comp()),
+        (m = mounted()),
+        untrack(() => (Comp && m ? Comp(rest) : props.fallback))
+      ),
+    )
+  }
+}

packages/solid-query-devtools/src/devtools.tsx

@@ -1,23 +1,13 @@
-import {
-  createEffect,
-  createMemo,
-  createSignal,
-  onCleanup,
-  onMount,
-  sharedConfig,
-  splitProps,
-  untrack,
-} from 'solid-js'
+import { createEffect, createMemo, onCleanup, onMount } from 'solid-js'
 import { onlineManager, useQueryClient } from '@tanstack/solid-query'
-import { isServer } from 'solid-js/web'
 import { TanstackQueryDevtools } from '@tanstack/query-devtools'
 import type {
   DevtoolsButtonPosition,
   DevtoolsErrorType,
   DevtoolsPosition,
 } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/solid-query'
-import type { Component, ComponentProps, JSX } from 'solid-js'
+import type { JSX } from 'solid-js'
 
 interface DevtoolsOptions {
   /**
@@ -40,6 +30,10 @@ interface DevtoolsOptions {
    * Custom instance of QueryClient
    */
   client?: QueryClient
+  /**
+   * Fallback component to show while the devtools are loading.
+   */
+  fallback?: JSX.Element
   /**
    * Use this so you can define custom errors that can be shown in the devtools.
    */
@@ -104,36 +98,3 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
 
   return <div class="tsqd-parent-container" ref={ref}></div>
 }
-
-/*
-  This function has been taken from solid-start's codebase
-  This allows the devtools to be loaded only on the client and bypasses any server side rendering
-  https://github.com/solidjs/solid-start/blob/2967fc2db3f0df826f061020231dbdafdfa0746b/packages/start/islands/clientOnly.tsx
-*/
-export function clientOnly<T extends Component<any>>(
-  fn: () => Promise<{
-    default: T
-  }>,
-) {
-  if (isServer)
-    return (props: ComponentProps<T> & { fallback?: JSX.Element }) =>
-      props.fallback
-
-  const [comp, setComp] = createSignal<T>()
-  fn().then((m) => setComp(() => m.default))
-  return (props: ComponentProps<T>) => {
-    let Comp: T | undefined
-    let m: boolean
-    const [, rest] = splitProps(props, ['fallback'])
-    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest)
-    const [mounted, setMounted] = createSignal(!sharedConfig.context)
-    onMount(() => setMounted(true))
-    return createMemo(
-      () => (
-        (Comp = comp()),
-        (m = mounted()),
-        untrack(() => (Comp && m ? Comp(rest) : props.fallback))
-      ),
-    )
-  }
-}

packages/solid-query-devtools/src/index.tsx

@@ -1,5 +1,5 @@
 import { isDev } from 'solid-js/web'
-import { clientOnly } from './devtools'
+import clientOnly from './clientOnly'
 import type SolidQueryDevtoolsComp from './devtools'
 
 export const SolidQueryDevtools: typeof SolidQueryDevtoolsComp = isDev