Next.js Discord

Discord Forum

`Error: async/await is not yet supported in Client Components`, but it's not a Client Component

Answered
Indian mackerel posted this in #help-forum
Open in Discord
Indian mackerelOP
this is my root layout
export default function RootLayout({ children }) {
  return (
    <html lang="it">
      <body
        className={`${inter.variable} ${poppins.variable} ${ubuntu.variable} ${robotoMono.variable}`}>
              <Navbar />
              {children}
              <Footer />
      </body>
    </html>
  );
}

and this is my Navbar code
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/authoptions";

import { NavbarContent } from "./components";

export default async function Navbar() {
  const notifications = []; //await getNotificationData(1);
  const session = await getServerSession(authOptions);
  return <NavbarContent notifications={notifications} userData={session?.user} />;
}

(NavbarContent is a client component), however i get 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.
Answered by riský
if a "use client" function imports an async component, there is still the issue
View full answer

12 Replies

European sprat
Can you share the NavbarContent code?
@European sprat Can you share the NavbarContent code?
Indian mackerelOP
it's like 500 lines long, it's some code with usestate for some interactivity and conditional rendering based on session.user
i can paste it tho if this is not enough
Indian mackerelOP
also a client component that uses session.user as prop
riský
but is NavbarContent a async function? of so, then you can't do that,,,
@Indian mackerel it's like 500 lines long, it's some code with usestate for some interactivity and conditional rendering based on session.user
European sprat
No one can help you if you don't show a complete picture. Put it in a gist or similar if you run into a limit here
@European sprat No one can help you if you don't show a complete picture. Put it in a gist or similar if you run into a limit here
Indian mackerelOP
i did some digging by removing every bit of code until i figured something

function NavbarContent({notifications, userData }) {
  // stuff
  return <nav>
    // code
    <Propic height={36} width={36} />
    // code
  </nav>
}

without Propic i get no error, with Propic i do

// Propic.jsx

import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/authoptions";
import { Content } from "./components";

export default async function Propic({ ...props }) {
    const session = await getServerSession(authOptions);
    return <Content userData={session?.user} {...props} />;
}

// Propic/components.jsx
"use client"

import { useContext } from "react";
import ImageWithFallback from "../ImageWithFallback/ImageWithFallback";
import { getDefaultPropic } from "./Propic";
import { PropicContext } from "@/context/PropicContext";

export function Content({ userData, ...props }) {
  const { propicKey } = useContext(PropicContext);

  return (
    userData && (
      <ImageWithFallback
        alt={"Immagine profilo"}
        src={`${process.env.NEXT_PUBLIC_SERVER_URL}/public/propic/${userData._id}.jpg?cI=${propicKey}`}
        fallback={`/propics/${getDefaultPropic(userData.username)}.svg`}
        {...props}
      />
    )
  );
}

// ImageWithFallback.jsx
"use client"

import Image from "next/image";
import { useState, useEffect } from "react";

export default function ImageWithFallback({ fallback, alt, src, ...props }) {
  const [error, setError] = useState(null);

  useEffect(() => {
    setError(null);
  }, [src]);

  return <Image alt={alt} onError={setError} src={error ? fallback : src} {...props}/>;
}
riský
if a "use client" function imports an async component, there is still the issue
Answer
Indian mackerelOP
ok, didnt know that
@European sprat Can you share the NavbarContent code?
SentientCabbage
What a massive coincidence, i was having the same error and I checked the navbar only to find I used usePathname in the file
So when I open a new route from the navbar, it wont error out. But when I click the back button on the browser, the error appears. When I refresh the page, the error is gone. This error was driving me crazy so thanks a bunch👊
Correct me if am wrong, I have a feeling I am not on the wrong because I followed the concepts of importing client comps into server comps correctly, yet this error behaves so weird and its because of usePathname.
SentientCabbage
I have done some exploring and figured I was on the wrong, usePathname is working as intended 😅
This error will still behave the same way if you use usePathname wrongly