Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Next.js Error: async/await Not Supported in React Client Component Despite No Usage – 'use client' Causing Issue"

For simplicity, I have this useState function


    'use client'
    import {useState} from 'react';
    
    const Home = () => {
      const [juice, setJuice] = useState('apple');
      return (
        <div className='w-full flex flex-col lg:flex-row h-40 bg-black' onClick={() => setJuice('orange')}>
          <p className='text-white text-2xl font-bold ml-4 mt-4'>{juice}</p>
        </div>
      )
    }
    
    export default Home

This works fine, when I click the div, the text display changes.

Then when I import this specific component, useState no longer works


    'use client'
    
    import ManageOrders from '../components/manage_orders';
    
    import {useState} from 'react';
    
    const Home = () => {
      const pageType = 'manageOrders';
      const [juice, setJuice] = useState('juice');
      return (
        <div>
            <div className='w-full flex flex-col lg:flex-row h-40 bg-black' onClick={() => setJuice('orange')}>
            <p className='text-white text-2xl font-bold ml-4 mt-4'>{juice}</p>
            </div>
            <ManageOrders />
        </div>
      )
    }
    
    export default Home

Now when using useState, I get this next.js error.

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.

Within that component, is a datatable that is created with an await function.


    export default async function ManageOrdersDataTable() {
      const data = await getData()
     
      return (
        <div className="w-full mx-auto py-10">
          <DataTable columns={columns} data={data} />
        </div>
      )
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution is to fetch the data properly with useEffect inside the ManageOrdersDataTable component.

    
    export default function ManageOrdersDataTable() {
        const [data, setData] = useState([]);
      
        useEffect(() => {
          const fetchData = async () => {
            const result = await getData();
            setData(result);
          };
      
          fetchData();
        }, []);
      
        return (
          <div className="w-full mx-auto py-10">
            <DataTable columns={columns} data={data} />
          </div>
        );
      }

  2. 0

    I can’t recreate the issue. Github Live Version. Everything works fine on my end. The issue might be with how you use PageProvider. Here’s my setup:

    export default function Home() {
  return (
    <main>
      <PageProvider>
        <AdminMenu />
      </PageProvider>
    </main>
  );
}

    OUTDATED answer

    It seems that your usePage component is server side. And useContext is supported on client side. next-redux-docs. As well as you can’t import server side component to client side.

    Adding use client in usePage component should fix the error.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search