I’m developing a Next.js application with the following structure:

scss
Copy code
src/
app/
(dashboard)/
(routes)/
tutor/
[chat]/
page.tsx
I’m encountering issues when trying to load the ChatPage component located in src/app/(dashboard)/(routes)/tutor/[chat]/page.tsx. Here is the component code:

Code Snippet:

typescript

import ChatComponent from "@/components/ChatComponent";
import ChatSideBar from "@/components/ChatSideBar";
import PDFViewer from "@/components/PDFViewer";
import { db } from "@/lib/db";
import { chats } from "@/lib/db/schema";
import { checkSubscription } from "@/lib/subscription";
import { auth } from "@clerk/nextjs";
import { eq } from "drizzle-orm";
import { redirect } from "next/navigation";
import React from "react";

type Props = {
  params: {
    chatId: string;
  };
};

const ChatPage = async ({ params: { chatId } }: Props) => {
  const { userId } = await auth();
  if (!userId) {
    return redirect("/sign-in");
  }
  const _chats = await db.select().from(chats).where(eq(chats.userId, userId));
  if (!_chats) {
    return redirect("/");
  }
  if (!_chats.find((chat) => chat.id === parseInt(chatId))) {
    return redirect("/");
  }

  const currentChat = _chats.find((chat) => chat.id === parseInt(chatId));
  const isPro = await checkSubscription();

  return (
    <div className="flex max-h-screen overflow-scroll">
      <div className="flex w-full max-h-screen overflow-scroll">
        {/* chat sidebar */}
        <div className="flex-[1] max-w-xs">
          <ChatSideBar chats={_chats} chatId={parseInt(chatId)} isPro={isPro} />
        </div>
        {/* pdf viewer */}
        <div className="max-h-screen p-4 oveflow-scroll flex-[5]">
          <PDFViewer pdf_url={currentChat?.pdfUrl || ""} />
        </div>
        {/* chat component */}
        <div className="flex-[3] border-l-4 border-l-slate-200">
          <ChatComponent chatId={parseInt(chatId)} />
        </div>
      </div>
    </div>
  );
};

export default ChatPage;

Issues Encountered:

Error Messages:
A module cannot have multiple default exports.ts(2528)
Client-Side Rendering Issue:

You’re importing a component that needs useRouter. It only works in a Client Component but none of its parents are marked with “use client”, so they’re Server Components by default.

Environment:

Next.js Version: 14.2.3
React Version: 18.2.0
TypeScript Version: 5.1.6
Clerk: Using @clerk/nextjs for authentication
Despite these checks, the error persists. Any insights or additional troubleshooting steps would be greatly appreciated.

Thank you for your help!

Steps Taken to Resolve:

Ensured Single Default Export: Verified that there is only one export default statement in page.tsx.
Checked for Multiple Default Exports: Searched the project for any other declarations of ChatPage or multiple default exports.
Parent Component Check: Ensured that if ChatPage is imported elsewhere, it does not cause any conflicts.
Marked as Client Component: Made sure the component and any parent components using useRouter are marked as “use client”.