Next.js Discord

Discord Forum

async/await not yet supported, when working in tutorial

Answered
American Wirehair posted this in #help-forum
Open in Discord
American WirehairOP
Hey, I have seen some tutorial where people could have async functions (and fetch data) as well as using some NextUI components in the same component.

However, when I do so, I have the infamous « async/await is not yet supported in client components » error.
I am still a beginner in NextJS / Web development, but if anyone could help me out I would be very grateful.

The workaround I found was to have a server component that would do the fetching and asynchronous work, which would return and pass the data to a client component for the styling

Tutorial: https://youtu.be/JTNBJHba_sE
Answered by joulev
what if you do [this](https://nextui.org/docs/frameworks/nextjs#:~:text=Important%20🚨:%20Note%20that%20you%20need%20to%20import%20the%20component%20from%20the%20individual%20package%2C%20not%20from%20@nextui%2Dorg/react.)?

import {Button} from '@nextui-org/button'; 
// instead of
import {Button} from '@nextui-org/react';
View full answer

46 Replies

@joulev hmm does your async component * have "use client" at the top; or * get used inside a client component; or * get imported into a client component?
American WirehairOP
Hey ! Thanks for the answer, I am going to be as precise as possible.

- No, I only use "use client" for the NextUI components, because if I do so for the component, I get the async/await error
Example code from TopNav.tsx (server):
import { auth } from "@/auth";
import TopNavLayout from "./TopNavLayout";
import { getUserInfoForNav } from "@/app/actions/userActions";

export default async function TopNav() {
    const session = await auth();
    const userInfo = session?.user && (await getUserInfoForNav());

    return <TopNavLayout userInfo={userInfo}/>;
}

and TopNavLayout.tsx (client):
Alright, can't send the rest of the message, i get a Clyde "You are not on the same server with your correspondant" error
But the key point is that NextUI components needs to be used in client components, when async/await needs to be in server components ; but the guy in the tutorial can mix the two without any problems when I can't
@joulev im taking it as you use <TopNav /> inside <TopNavLayout /> right?
American WirehairOP
No, it's the opposite ; I call TopNav, and TopNav contains TopNavLayout (given NextJS's logic, I did it the opposite way, I haven't thought about it before)
TopNavLayout would be better named "TopNavClient"
@American Wirehair No, it's the opposite ; I call TopNav, and TopNav contains TopNavLayout (given NextJS's logic, I did it the opposite way, I haven't thought about it before)
joulev
oh yeah sorry i see what you mean now. this shouldn't be the cause of the problem though, rendering client component inside server component is normal and supported
unless... you accidentally put an async before TopNavLayout
@joulev unless... you accidentally put an async before TopNavLayout
American WirehairOP
That's what I would do when fetching the data (it's what the guy in the tutorial can do; his client components are async)
But on my code it just doesn't work and I get the async / await error
Tutorial code:
@American Wirehair Tutorial code:
joulev
it doesn't have 'use client' at the top so this one works
American WirehairOP
Mine for TopNavLayout:
@American Wirehair Mine for TopNavLayout:
joulev
and yours has 'use client' at the top so it doesn't work
@joulev it doesn't have 'use client' at the top so this one works
American WirehairOP
Yup, but the NextUI components in my code ask me to put it
that's why it's really mystical to me
man I miss C so much everything is logic lol
Probably a dependency difference? It's the thing I have struggled the most to be honest, everything goes wild
joulev
this smells like nextui bad code lol, lemme research on how to fix this
@joulev this smells like nextui bad code lol, lemme research on how to fix this
American WirehairOP
thanks! I have considered switching to shadcn-ui for my next project, what do you reckon?
Answer
@American Wirehair thanks! I have considered switching to shadcn-ui for my next project, what do you reckon?
joulev
im using it (well, a custom derivative of it), it works very well. highly recommended
i dont use nextui
American WirehairOP
lemme check that (I need to fix a channel bug, but I am just going to disable it to test your solution)
do you have the source so I can get the context?
@joulev im using it (well, a custom derivative of it), it works very well. highly recommended
American WirehairOP
what's that derivative and why don't you use the main one?
@American Wirehair what's that derivative and why don't you use the main one?
joulev
i bring my own design. so i just install the shadcn components then delete all default styling and use my own
oh dang that's pretty cool
shame on me for only following the tutorial and not reading the docs
joulev
haha it happens, this is quite hidden as well and it's just bizarre why they would do this rather than adding "use client" to the /react export
American WirehairOP
seems to be working pretty well! thanks a lot!
It's super weird because it's not even in the suggest import when you type the "Button" component, you automatically get to have the "@nextui-org/react" import and the "@nextui-org/button" isn't even suggested
Many i need to install each one of them like with shadcn-ui? I don't know, but I am never going to use this library after this project lol
Anyways thanks a lot joulev, just gotta refactor the whole project after I fix a couple of other issues now ;)
Thanks for taking the time and doing the effort to dig, super appreciated!
@joulev shadcn is where you manually copy component-by-component, so you can install as little as you want and as much as you want. each component has a detailed installation instruction
American WirehairOP
yeah like a pnpm add shadcn-ui/button no? (just typed it out of my memory so might not be exactly that but you get the idea)
thanks for all the advice and little tips :)
@American Wirehair yeah like a `pnpm add shadcn-ui/button` no? (just typed it out of my memory so might not be exactly that but you get the idea)
joulev
shadcn doesn't publish on npm, it's more that you just go to the website and there is a source code there and you just ctrl+c to your project, as simple as it gets
they have a command line tool now but i never use it because why fix what work
@joulev they have a command line tool now but i never use it because why fix what work
American WirehairOP
🤣
but yeah love the copy/paste feature, makes everything so less complicated
@American Wirehair but yeah love the copy/paste feature, makes everything so less complicated
joulev
i know right? it gives the feeling that you own the whole thing from the very beginning
compared to node_modules where it's not trivial to edit, here you just edit it as much as you want
for people who want to bring their own design system like i do, i really like it
@joulev for people who want to bring their own design system like i do, i really like it
American WirehairOP
you gotta be skilled in UI / UX for that haha, that's a super talent to have (maybe on of my 2025 goals???)
I am more of a backend guy, I do security and AI so I just wanna ship fast, and shadcn-ui seems to be the best go-to strategy