React Context is unavailable in server components, calling getServerSession?
Unanswered
Egyptian Mau posted this in #help-forum
Egyptian MauOP
import { getServerSession } from "next-auth";
// import { NextUIProvider } from "@nextui-org/react";
import { SessionProvider } from "next-auth/react";
import { authConfig } from "./api/auth/[...nextauth]/route";
export async function Providers({ children }: { children: React.ReactNode }) {
const session = await getServerSession(authConfig);
return (
<SessionProvider session={session}>
{/* <NextUIProvider> */}
{children}
{/* </NextUIProvider> */}
</SessionProvider>
);
}Why would this component cause this error? Isn't getServerSession supposed to be called in Server Components?
Error: React Context is unavailable in Server Components
8 Replies
Plott Hound
Did you put “use client†at the top of this file?
Egyptian MauOP
No I did not what you see is the full file
Plott Hound
Try adding it
Anything to do with react context needs to be in a file marked with “use clientâ€
@Egyptian Mau import { getServerSession } from "next-auth";
// import { NextUIProvider } from "@nextui-org/react";
import { SessionProvider } from "next-auth/react";
import { authConfig } from "./api/auth/[...nextauth]/route";
export async function Providers({ children }: { children: React.ReactNode }) {
const session = await getServerSession(authConfig);
return (
<SessionProvider session={session}>
{/* <NextUIProvider> */}
{children}
{/* </NextUIProvider> */}
</SessionProvider>
);
}`
Why would this component cause this error? Isn't getServerSession supposed to be called in Server Components?
Error: React Context is unavailable in Server Components
This is incorrect. Your provider needs to be a client component. Therefore add "use client" on the first line of where Provider is located.
Then You need to call getServerSession outside of the client component and pass it down to the Provider as a props.
Then You need to call getServerSession outside of the client component and pass it down to the Provider as a props.
@aardani This is incorrect. Your provider needs to be a client component. Therefore add "use client" on the first line of where Provider is located.
Then You need to call getServerSession outside of the client component and pass it down to the Provider as a props.
Plott Hound
I think this is supposed to be the provider file.
Remove any nextauth imports and consts, remove the session provider wrapper, mark file as “use clientâ€, remove async from the function
You only need a session provider if you plan to access the session in client components. Otherwise you just call getServerSession in server components as you need it