Error: You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. #65665

Mohit-au50 · 2024-05-12T19:14:40Z

Mohit-au50
May 12, 2024

Summary

It should not return this error as in the nextjs docs it is mentioned we can use client component in server component if the client component has the "use Client" directive at the top of the file, I'm using "use Client" still getting the error when importing it in IncomePage.tsx which is a server component

using Next.js (14.2.3)

Additional information

// @/app/ui/dashboard/income-card.tsx

"use Client";

import { PlusIcon } from "@heroicons/react/16/solid";
import { useState } from "react";

export default function IncomeCardWrapper() {
  const [addNewIncome, setAddNewIncome] = useState<boolean>(false);

  return (
    <>
      {addNewIncome && (
        <div>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis
            ut magnam consequuntur incidunt vel facilis doloribus eos ipsam
            voluptatem pariatur aspernatur, reprehenderit eius aperiam
            provident, quis officia neque obcaecati dolorum!
          </p>
        </div>
      )}
      <div
        onClick={() => setAddNewIncome((prev: boolean) => !prev)}
        className="grid aspect-video w-full cursor-pointer place-items-center rounded-xl border-2 border-dark bg-dark/10 p-4 tracking-wide text-dark"
      >
        <div className="flex items-center gap-1.5">
          <PlusIcon className="h-6 w-6" />
          <p>Add New Income</p>
        </div>
      </div>
      <IncomeCard title="Income" />
      <IncomeCard title="Income" />
    </>
  );
}

export function IncomeCard({ title }: { title: string }) {
  return <div title={title} className="bg-rose-500 p-4" />;
}


// @/app/dashboard/income/page.tsx here I'm importing the above client component

import { addUserInCollection } from "@/app/lib/firebase/crud/create/incomeHandler";
import IncomeCardWrapper from "@/app/ui/dashboard/income-card";
import { lusitana } from "@/app/ui/fonts";
import { IncomeCardsSkeleton } from "@/app/ui/skeletons";
import { Suspense } from "react";

export default async function IncomePage() {
  // const res = await addUserInCollection("user", "admin@gmail.com");
  // console.log(res);

  return (
    <section className="h-full">
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Welcome to Income Page
      </h1>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Suspense fallback={<IncomeCardsSkeleton />}>
          <IncomeCardWrapper />
        </Suspense>
      </div>
    </section>
  );
}