Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.

Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components.
Classes or null prototypes are not supported.

When above error is thrown in React 14+, root cause may be QueryClientProvider not being defined in client scope using "use client".

Solution for Next.js apps using App Router

Add providers.tsx where root layout.tsx with content like this:

providers.tsx:

"use client"

import { useState } from "react"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"

// good place to add more providers at app level. 
export function RootProviders({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(new QueryClient())
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  )
}

layout.tsx:

import { RootProviders } from './providers'
...
  return (
    <RootProviders>
      <html lang="en">
        <body className={inter.className}>{children}</body> 
      </html>
    </RootProviders>
  )

donpark/react-query.md

Solution for Next.js apps using App Router