fix(query-devtools): Fix getSidedProp bug (#5551)

Author: ardeora

packages/query-devtools/src/Devtools.tsx

@@ -321,10 +321,9 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
   createEffect(() => {
     const rootContainer = panelRef.parentElement?.parentElement?.parentElement
     if (!rootContainer) return
-    const styleProp = getSidedProp(
-      'padding',
-      props.localStore.position as DevtoolsPosition,
-    )
+    const currentPosition = (props.localStore.position ||
+      POSITION) as DevtoolsPosition
+    const styleProp = getSidedProp('padding', currentPosition)
     const isVertical =
       props.localStore.position === 'left' ||
       props.localStore.position === 'right'

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

@@ -37,7 +37,7 @@ export interface DevtoolsOptions {
   errorTypes?: DevToolsErrorType[]
 }
 
-export function ReactQueryDevtools(
+function ReactQueryDevtoolsDev(
   props: DevtoolsOptions,
 ): React.ReactElement | null {
   const queryClient = useQueryClient()
@@ -93,3 +93,14 @@ export function ReactQueryDevtools(
 
   return <div ref={ref}></div>
 }
+
+function ReactQueryDevtoolsProd(
+  _props: DevtoolsOptions,
+): React.ReactElement | null {
+  return null
+}
+
+export const ReactQueryDevtools: typeof ReactQueryDevtoolsDev =
+  process.env.NODE_ENV !== 'development'
+    ? ReactQueryDevtoolsProd
+    : ReactQueryDevtoolsDev