Hey all
I'm getting this error in my Next.js project:

cmascript file had an error
  1 | import { auth } from "@/lib/auth";
> 2 | import { headers } from "next/headers";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 |
  4 | export async function SignedIn({children}: {children: React.ReactNode}) {
  5 |   const session = await auth.api.getSession({

You're importing a component that needs "next/headers". That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/app/building-your-application/rendering/server-components

Import traces:
  Client Component Browser:
    ./src/components/auth.tsx [Client Component Browser]
    ./src/components/customUi/Navbar.tsx [Client Component Browser]
    ./src/components/customUi/Navbar.tsx [Server Component]
    ./src/app/layout.tsx [Server Component]

  Client Component SSR:
    ./src/components/auth.tsx [Client Component SSR]
    ./src/components/customUi/Navbar.tsx [Client Component SSR]
    ./src/components/customUi/Navbar.tsx [Server Component]
    ./src/app/layout.tsx [Server Component]

My auth.tsx uses next/headers and async functions, and it’s not marked with "use client". But Navbar.tsx is a Client Component and imports SignedOut from auth.tsx. Could that be the issue? Is Next.js treating auth.tsx as a Client Component because it’s imported by one? How do I fix this?
Navbar code is attached in a file. auth.tsx:

import { auth } from "@/lib/auth";
import { headers } from "next/headers";

export async function SignedIn({children}: {children: React.ReactNode}) {
  const session = await auth.api.getSession({
    headers: await headers()
  });
  if(!session?.user) {
    return null;
  }
  return children;
}

export async function SignedOut({children}: {children: React.ReactNode}) {
  const session = await auth.api.getSession({
    headers: await headers()
  });
  if(session?.user) {
    return null;
  }
  return children;
}

Thanks!