Getting an error when using Async in a Server Component i've never seen before. How do I fix this?
Answered
Eulophid wasp posted this in #help-forum
Eulophid waspOP
"use server";
import { Grid } from "@radix-ui/themes";
import { Suspense } from "react";
import { WorksheetCard } from "./worksheet-card";
import { type WorksheetProps } from "@/data/worksheets";
const WorksheetGrid = ({ worksheets }: { worksheets: WorksheetProps[] | undefined }) => {
return (
<Grid display="grid" columns={`repeat(6, minmax(0, 1fr))`} rows="256px" gap="4" width="auto">
{worksheets?.map((worksheet, index) => {
return <WorksheetCard key={index} worksheet={worksheet} />;
})}
</Grid>
);
};
export const WorksheetGridProvider = async ({ worksheets }: { worksheets: WorksheetProps[] | undefined }) => {
return (
<Suspense>
<WorksheetGrid worksheets={worksheets} />
</Suspense>
);
};Answered by Giant panda
My bet though is on nextauth just not working correctly yet with next 15.
20 Replies
What error do you get?
@chisto What error do you get?
Eulophid waspOP
@Eulophid wasp Click to see attachment
Giant panda
guessing you updated to next 15?
headers is now an async api so you need to await it.
@Giant panda headers is now an async api so you need to await it.
Eulophid waspOP
how do I go about that with components?
Giant panda
find where you are using the headers api
@Giant panda find where you are using the headers api
Eulophid waspOP
im not using it, thats my issue
it says that the route is from /dashboard/worksheets
but this is the code for just that page
export default async function Worksheets() {
const session = await auth();
const worksheets = await GetWorksheets();
return (
<WorksheetTrashProvider>
<Flex as="div" direction="column" gap="4">
<WorksheetPage is_admin={session?.user.is_admin as boolean} />
<Separator size="4" />
<WorksheetGridProvider worksheets={worksheets} />
</Flex>
</WorksheetTrashProvider>
);
}Giant panda
auth() and GetWorkSheets(), where is that being imported from?@Giant panda `auth()` and `GetWorkSheets()`, where is that being imported from?
Eulophid waspOP
export const GetWorksheets = async () => {
const session = await auth();
if (!session || !session.user || !session.user.id) return;
const worksheets = await db.worksheet.findMany({ where: { user_id: session.user.id } });
return worksheets;
};export const { handlers, signIn, signOut, auth } = NextAuth({
adapter: PrismaAdapter(db),
session: { strategy: "jwt" },
...authConfig,
callbacks: {
async signIn({ user }) {
const existingUser = await getSchoolByID(user.id as string);
if (!existingUser || !existingUser.emailVerified) return false;
return true;
},
async session({ token, session }) {
if (token.sub && session.user) {
session.user.id = token.sub;
session.user.is_admin = token.is_admin;
}
return session;
},
async jwt({ token, user, trigger }) {
if (!token.sub) return token;
const existingUser = await getSchoolByID(token.sub);
if (!existingUser) return token;
switch (trigger) {
case "signIn":
token.is_admin = user.is_admin;
break;
case "signUp":
token.is_admin = user.is_admin;
case "update":
console.log("Token Updating!");
break;
default:
break;
}
return token;
},
},
});Giant panda
My guess then is that nextauth is importing the headers and has not been updated to support the new async apis.
but double check it's not your code somewhere by searching for
headers in your ide.Giant panda
My bet though is on nextauth just not working correctly yet with next 15.
Answer
@Giant panda My bet though is on nextauth just not working correctly yet with next 15.
Eulophid waspOP
let me try and update next-auth cuz i believe im using an older version
@Giant panda My bet though is on nextauth just not working correctly yet with next 15.
Eulophid waspOP
it was next-auth, just updated it and there are no more errors
thanks
Giant panda
np