NEED HELP WITH ERROR ASYNC AWAIT
Unanswered
Red-billed Tropicbird posted this in #help-forum
Red-billed TropicbirdOP
Hi Guys I am using Next JS 14 and am trying to make a AI SaaS app but I ran into this issue:
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.
DO any of you know how to fix it ?
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.
DO any of you know how to fix it ?
80 Replies
Im sure if you shared some code SOME of us would know how to fix it.
Red-billed TropicbirdOP
Here is the repo look at the multiForm branch:
https://github.com/Kanwar-Ghuman/ReZume
https://github.com/Kanwar-Ghuman/ReZume
I mean you still need to tell me WHERE the error is occuring.
Red-billed TropicbirdOP
It does not tell me its just gives me that error message when I start the app, sorry I am new to next js
Im not going to pull down your repo and run it, if thats what your expecting.
can you please paste the entirety of the error message?
It should give a file name
the error is occuring in
Red-billed TropicbirdOP
Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding
No specfic file
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding
'use client' to a module that was originally written for the server.No specfic file
its does not say
it just has a call stack to react
Yes, provide that.
Provide the error in its entirety.
Literally screenshot it.
You have a really big app to just start going through to find your error.
Red-billed TropicbirdOP
And what url are you on when you get that/
Red-billed TropicbirdOP
localhost:3000
You dont have a page in your base dir. which means its redirecting you
Red-billed TropicbirdOP
But I do I have a page at just the base
this event occurs after I try to do any action on the app
the regular app runs then when I do an event this pops up
I need specifics man.
Give me examples.
Give me the specific page and or element you are clicking when you get the error.
Red-billed TropicbirdOP
So my base is the landing page and when I click ont he get started button this erro occurs
Red-billed TropicbirdOP
Hero
so when you click get started it sends you to signup.
So now we go there
This app is very large for not knowing nextjs.
Red-billed TropicbirdOP
ITs based off of a template
I used to use react
Firs tthings first.
This file
Red-billed TropicbirdOP
But its not just the button its any event on the screen like I could just click the white space
iand it would do that
O.O
Uhhh.
This makes it so much more complicated.
Do you have a functional version of this application?
Red-billed TropicbirdOP
Yes the main branch
you need to roleback, and implement each thing slowly, till you find what is causing the issue.
Red-billed TropicbirdOP
ok. I will try to back track thanks
I have a feeling its something inside of the layout.tsx
in the base route.
Red-billed TropicbirdOP
I was just implmenting stripe today and it messed everything up
Yeah, your gunna have to slowly get to the point where it breaks.
Red-billed TropicbirdOP
ok
What your describing is something global, thats why I was thinking some kind of provider or something.
Red-billed TropicbirdOP
Yeah I added a SessionProvider today
If you find what is causing the issue id be more than happy to look at the specific issue
Okay.
So go into your layout.tsx
and remove it for a min
and reload
Red-billed TropicbirdOP
this was due to the error I had :
Error: [next-auth]:
at useCurrentUser (./src/hooks/use-current-session.ts:9:80)
at CoursePurchaseButton (./src/components/resume-purchase-button.tsx:20:95)
Error: [next-auth]:
useSession must be wrapped in a <SessionProvider />at useCurrentUser (./src/hooks/use-current-session.ts:9:80)
at CoursePurchaseButton (./src/components/resume-purchase-button.tsx:20:95)
Okay okay. We are getting somewhere
one sec
Hmmmm... sec might know what it is?
maybe
Check out the client documentation to see how you can improve the user experience and page performance by using the NextAuth.js client. If you are using the Next.js App Router, please note that <SessionProvider /> requires a client component and therefore cannot be put inside the root layout. For more details, check out the Next.js documentation.Okay..... soooooo.
Red-billed TropicbirdOP
where do I put it then
Well I dont know next auth.... so trying to think
You still need to put it there but theres some ways around this limitation
Okay so.... you need to make a seperate component
then in your layout import it
"use client";
import { SessionProvider } from "next-auth/react";
export interface AuthContextProps {
children: React.ReactNode;
}
export default function AuthContext({ children }: AuthContextProps) {
return <SessionProvider>{children}</SessionProvider>;
}then in your layout import it
import AuthContext from "./AuthContext";
export default function RootLayout({ children }) {
return (
<AuthContext>
{children}
</AuthContext>
);
}Basically your wrapping sessionProvider in a client component, then importing that client component into your server layout which is server side.
Red-billed TropicbirdOP
Ok I will try it
I dont know if this is the best solution, I just know its a possible solution
Im about to head to bed though, so if that doesnt work hopefully someone else comes along.
Red-billed TropicbirdOP
Could I add u?
Negative lol sorry ill check back in in the morning to see if the issue is still an issue.
Red-billed TropicbirdOP
ok thanks for all of the help
No problem. I dont mind you adding me, just we should keep this conversation here, and if I am not feeling up to help, you gotta respect that.
cause I got a job too 😉
Red-billed TropicbirdOP
k