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

Question

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>
      )

Answer 1

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>
        );
      }