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 Spectacled bear
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
Spectacled bear
guessing you updated to next 15?
headers is now an async api so you need to await it.
@Spectacled bear headers is now an async api so you need to await it.
Eulophid waspOP
how do I go about that with components?
Spectacled bear
find where you are using the headers api
@Spectacled bear 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>
);
}Spectacled bear
auth() and GetWorkSheets(), where is that being imported from?@Spectacled bear `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;
},
},
});Spectacled bear
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.Spectacled bear
My bet though is on nextauth just not working correctly yet with next 15.
Answer
@Spectacled bear 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
@Spectacled bear 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
Spectacled bear
np