next js vercel deployment fail: TypeError: Cannot read properties of undefined (reading 'entryCSSFiles')

my vercel deployment is always failing for the below error message, tried to search everywhere but failed to find the root cause and how to fix it... My local env I'm able to run dev and build(sometimes, this is also weird) succesfully, stuck at vercel deployment, need someone help me out, appreciate!

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'entryCSSFiles')
    at r_ (/mypath/Desktop/dev/interview-cat/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:5173)
    at J.preloadCallbacks (/mypath/Desktop/dev/interview-cat/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:7837)
    at rj (/mypath/Desktop/dev/interview-cat/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:8824)
    at /mypath/Desktop/dev/interview-cat/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:6849
    at /mypath/Desktop/dev/interview-cat/node_modules/next/dist/server/lib/trace/tracer.js:171:36
    at NoopContextManager.with (/mypath/Desktop/dev/interview-cat/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/mypath/Desktop/dev/interview-cat/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NoopTracer.startActiveSpan (/mypath/Desktop/dev/interview-cat/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18093)
    at ProxyTracer.startActiveSpan (/mypath/Desktop/dev/interview-cat/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18854)
    at /mypath/Desktop/dev/interview-cat/node_modules/next/dist/server/lib/trace/tracer.js:153:103
Export encountered an error on /(router)/page: /, exiting the build.
 ⨯ Static worker exited with code: 1 and signal: null

relevant files /(router)/page, I only have one css file under app/globals.css

import ChallengeSection from '@/app/components/home/ChallengeSection';
import AdvantageSection from '@/app/components/home/AdvantageSection';
import ServicesSection from '@/app/components/home/ServicesSection';
import HeroSection from '@/app/components/home/HeroSection';
import TestimonialsSection from '@/app/components/home/TestmonialsSection';
import CTASection from '@/app/components/home/CTASection';
import Navbar from '@/app/components/navigation/NavBar';

export default function HomePage() {
  return (
    <main className="min-h-screen">
      <Navbar />
      <HeroSection />
      <ChallengeSection />
      <AdvantageSection />
      <ServicesSection />
      <TestimonialsSection />
      <CTASection />
    </main>
  );
}

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

tree of dir

Because you have 2 activate roots ('/'): one comes from app/page.tsx and another one comes from app/(route)/page.tsx. So, you can delete the page of (route) and your app will not catch that error anymore