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
So what I did is like this., I created a provider.
And then I wrap my children
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 TanstackProviderimport { 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 TanstackProviderAnd 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>
