Fail to collect data from /dashboard

[Bonker009]

I am currently working on a Next.js project and have encountered an issue while attempting to execute the npm run build command. Despite multiple attempts.
I have ensured that all dependencies are up-to-date and have thoroughly reviewed the project configuration files. However, the issue persists. I am seeking assistance to resolve this problem to successfully build the project.

import Image from "next/image";
import ReportCard from "@/app/(dashboard))/components/reportCard";
import {
  getNumberOfReportedRecipe,
  getNumberOfUserReported,
  getNumberOfRecipe,
  getNumberOfUser,
} from "@/services/dashboard.service";

export default async function Page() {
  let reportRecipeCard, reportUserCard, reportRecipeCount, reportUserCount;

  try {
    reportRecipeCard = await getNumberOfReportedRecipe();
    reportUserCard = await getNumberOfUserReported();
    reportRecipeCount = await getNumberOfRecipe();
    reportUserCount = await getNumberOfUser();
  } catch (error) {
    console.error("Error fetching dashboard data:", error);
    return <div>Failed to load dashboard data</div>;
  }

  return (
    <section className="grid grid-cols-12 bg-white w-full h-full rounded-tl-lg p-24">
      <div className="col-span-8 flex justify-between items-center flex-col">
        <h1 className="font-moulpali text-secondary text-5xl font-semibold text-center">
          របាយការណ៍សរុប
        </h1>
        <div>
          <div className="flex gap-2 items-center mb-10">
            <Image
              src="/icons/Romdol.svg"
              alt="Romdol Icon"
              width={33}
              height={33}
            />
            <p className="gradient-text text-2xl font-semibold">
              របាយការណ៌អំពីមុខម្ហូប និង អ្នកប្រើប្រាស់
            </p>
          </div>
          <div className="flex gap-7 flex-wrap justify-around">
            <ReportCard
              title="ចំនួនរាយការណ៏ម្ហូប"
              logoAlt="report food"
              logoSrc="/assets/images/dashboard-report-food.png"
              count={reportRecipeCard}
            />
            <ReportCard
              title="ចំនួនរីផតអ្នកប្រើប្រាស់"
              logoSrc="/assets/images/dashboard-report-user.png"
              logoAlt="report user"
              count={reportUserCard}
            />
            <ReportCard
              logoSrc="/assets/images/total-food.png"
              title="ចំនួនម្ហូបសរុប"
              logoAlt="total recipe"
              count={reportRecipeCount}
            />
            <ReportCard
              logoSrc="/assets/images/total-user.png"
              title="ចំនួនអ្នកប្រើប្រាស់សរុប"
              logoAlt="total user"
              count={reportUserCount}
            />
          </div>
        </div>
      </div>
      <div className="col-span-4 relative">
        <Image
          src="/assets/images/Cooking-pana.svg"
          alt="cooking pana"
          fill
        />
      </div>
    </section>
  );
}

and this is the message i got

   Collecting page data  .Error: `headers` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context
    at getExpectedRequestStore (C:\Users\penhs\seyha\krorya-ui\node_modules\next\dist\client\components\request-async-storage.external.js:28:11)
    at u (C:\Users\penhs\seyha\krorya-ui\.next\server\chunks\5719.js:31:1697)
    at a (C:\Users\penhs\seyha\krorya-ui\.next\server\chunks\5719.js:25:20470)
    at d (C:\Users\penhs\seyha\krorya-ui\.next\server\app\api\category\route.js:1:6323)
    at C:\Users\penhs\seyha\krorya-ui\.next\server\chunks\3690.js:1:13061
    at t.a (C:\Users\penhs\seyha\krorya-ui\.next\server\webpack-runtime.js:1:891)
    at 45867 (C:\Users\penhs\seyha\krorya-ui\.next\server\chunks\3690.js:1:12890)
    at t (C:\Users\penhs\seyha\krorya-ui\.next\server\webpack-runtime.js:1:128)
    at C:\Users\penhs\seyha\krorya-ui\.next\server\app\(dashboard))\dashboard\page.js:1:4112
    at t.a (C:\Users\penhs\seyha\krorya-ui\.next\server\webpack-runtime.js:1:891)

> Build error occurred
Error: Failed to collect page data for /dashboard
    at C:\Users\penhs\seyha\krorya-ui\node_modules\next\dist\build\utils.js:1268:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
   Collecting page data

[mutasim77]

What do you have in your app/api/category/route.js? Ensure that you are not using headers() or any similar request-specific functions outside of the request handler functions.