T
TanStack•16mo ago
other-emerald

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>)
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
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>
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>
2 Replies
extended-salmon
extended-salmon•16mo ago
the providers file itself needs to be a client component
other-emerald
other-emeraldOP•16mo ago
Thank you, whaha, so that's the only problem, I'm trying to figure it out, where I went wrong

Did you find this page helpful?