TanStackT
TanStack•2y ago•
2 replies
cold-orange

Only plain objects, and a few built-ins, can be passed to Client Components from Server Components.

Hello, I'm having a little bit of trouble here, so I'm using nextjs 14, after adding my custom provider, I get this error

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.
    at stringify (<anonymous>)


So what I did is like this., I created a provider.

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

const TanstackProvider = ({children}: {children:React.ReactNode}) => {

  const queryClient = new QueryClient()

  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  )
}

export default TanstackProvider


And then I wrap my children


import { SessionProvider } from "next-auth/react";
import TanstackProvider from "@/providers/TanstackProvider";

 <SessionProvider session={session}>
      <html lang="en">
        <body className={font.className}>
          <TanstackProvider>
            {children}
            <Toaster />
          </TanstackProvider>
        </body>
      </html>
    </SessionProvider>
Was this page helpful?