Error: async/await is not yet supported in Client Components, only Server Components.

Answered

Brown bear posted this in #help-forum

Brown bearOP

2024-03-19T01:52:31.000Z

I'm really confused as to how you'd do this.
It's screaming about async/ await in my client component, which is untrue. My client component does not use async/await.
I separated the callbacks LogoutUser() and GetUser() into their respected files, they are both server functions and both are using async await.
What am I doing wrong here?

'use client';
import { useState, useEffect } from 'react';
import SignInButton from '@/components/SignInButton';
import SignUpButton from '@/components/SignUpButton';
import GetUser from '@/utils/api/getUser';
import { Button } from '@nextui-org/button';
import LogoutUser from '@/utils/api/logoutUser';
export default function AuthButtonGroup() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    GetUser()
      .then((userData) => {
        setUser(userData);
      })
      .catch((error) => {
        console.error('Error fetching user:', error);
      });
  }, []);
  const handleStateChange = () => {
    LogoutUser();
    setUser(null);
  };
  return (
    <div>
      {user ? (
        <Button onPress={handleStateChange}>Log out</Button>
      ) : (
        <div>
          <SignUpButton />
          <SignInButton />
        </div>
      )}
    </div>
  );
}
Server functions 
'use server';
import { createClient } from '@/utils/supabase/server';
import { cookies } from 'next/headers';
const GetUser = async () => {
  const cookieStore = cookies();
  const supabase = createClient(cookieStore);
  const {
    data: { user },
  } = await supabase.auth.getUser();

  return user;
};
export default GetUser;
----
'use server';
import { createClient } from '@/utils/supabase/server';
import { cookies } from 'next/headers';

const LogoutUser = async () => {
  const cookieStore = cookies();
  const supabase = createClient(cookieStore);

  await supabase.auth.signOut();
  return null;
};
export default LogoutUser;

Answered by Brown bear

@American Crow Actually I figured it out, the sign in buttons were client but I put an async in the function.

Thanks for your help

View full answer

9 Replies

Brown bearOP

2024-03-19T01:53:40.000Z

The error in question

"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."

American Crow

2024-03-19T09:03:28.000Z

'use client'
 
import { incrementViews } from './actions'
import { useState, useEffect } from 'react'
 
export default function ViewCount({ initialViews }: { initialViews: number }) {
  const [views, setViews] = useState(initialViews)
 
  useEffect(() => {
    const updateViews = async () => {
      const updatedViews = await incrementViews()
      setViews(updatedViews)
    }
 
    updateViews()
  }, [])
 
  return <p>Total Views: {views}</p>
}

Sorry on phone but above is how to use server actions in a use effect. And within a event handler coming up

'use client'
 
import { publishPost, saveDraft } from './actions'
 
export default function EditPost() {
  return (
    <form action={publishPost}>
      <textarea
        name="content"
        onChange={async (e) => {
          await saveDraft(e.target.value)
        }}
      />
      <button type="submit">Publish</button>
    </form>
  )
}

Brown bearOP

2024-03-19T16:30:46.000Z

Thank you for the help, still running into the same issue.

I changed the requests to be client request so it's a client component depending on another client component and the issue still persist.

I read the error right, it's saying async/await are NOT allowed in any client component?

American Crow

2024-03-19T16:41:10.000Z

yea it's not supported yet. You have to use server actions (which you do). On the client you are allowed to use the await for the server action in forms (most common) or event handlers (see above) or useeffect (see above). My guess is that your server actions itself have an error so that they are not actually run on th e server. Are you declaring 'use server' twice in one file? it's hard to know from what you posted.
You only specify it once at the top. Here is an example of a file containing multiple actions:
https://github.com/sadmann7/skateshop/blob/main/src/lib/actions/cart.ts

Brown bearOP

2024-03-19T17:01:17.000Z

Thanks, yeah I had to combine them due to discord text limit.

This is the two server actions I am importing

getUser

'use server';
import { createClient } from '@/utils/supabase/server';
import { cookies } from 'next/headers';

const GetUser = async () => {
  const cookieStore = cookies();
  const supabase = createClient(cookieStore);

  const {
    data: { user },
  } = await supabase.auth.getUser();

  return user;
};

export default GetUser;

and LogoutUser

'use server';
import { createClient } from '@/utils/supabase/server';
import { cookies } from 'next/headers';

const LogoutUser = async () => {
  const cookieStore = cookies();
  const supabase = createClient(cookieStore);

  await supabase.auth.signOut();
  return null;
};

export default LogoutUser;

Brown bearOP

2024-03-19T18:44:47.000Z

@American Crow Actually I figured it out, the sign in buttons were client but I put an async in the function.

Thanks for your help

Answer

@Brown bear <@240974567730970625> Actually I figured it out, the sign in buttons were client but I put an async in the function. Thanks for your help

American Crow

2024-03-19T20:43:31.000Z

okay. thanks for sharing and well done