chore: fix issue with core class (#171)

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

Author: AlemTuzlak

.changeset/free-women-film.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-utils': patch
+---
+
+fix issues with mounting

packages/devtools-utils/src/react/panel.tsx

@@ -41,7 +41,9 @@ export function createReactPanel<
       }
 
       return () => {
-        devtools.current?.unmount()
+        if (devToolRef.current) {
+          devtools.current?.unmount()
+        }
       }
     }, [props?.theme])
 

packages/devtools-utils/src/solid/class.tsx

@@ -28,8 +28,7 @@ export function constructCoreClass(Component: () => JSX.Element) {
       }
       const mountTo = el
       const dispose = render(() => {
-        // eslint-disable-next-line @typescript-eslint/require-await
-        this.#Component = lazy(async () => ({ default: Component }))
+        this.#Component = Component
 
         this.#ThemeProvider = lazy(() =>
           import('@tanstack/devtools-ui').then((mod) => ({

packages/devtools-utils/src/solid/panel.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 
-import { onCleanup, onMount } from 'solid-js'
+import { createSignal, onCleanup, onMount } from 'solid-js'
 import type { ClassType } from './class'
 
 export interface DevtoolsPanelProps {
@@ -12,17 +12,14 @@ export function createSolidPanel<
 >(CoreClass: ClassType) {
   function Panel(props: TComponentProps) {
     let devToolRef: HTMLDivElement | undefined
-
+    const [devtools] = createSignal(new CoreClass())
     onMount(() => {
-      const devtools = new CoreClass()
-
       if (devToolRef) {
-        devtools.mount(devToolRef, props?.theme ?? 'dark')
-
-        onCleanup(() => {
-          devtools.unmount()
-        })
+        devtools().mount(devToolRef, props?.theme ?? 'dark')
       }
+      onCleanup(() => {
+        devtools().unmount()
+      })
     })
 
     return <div style={{ height: '100%' }} ref={devToolRef} />