How do I actually use tRPC without using a server component

./src/trpc/server.ts
ReactServerComponentsError:

You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[/Users/viszya/Developer/Projects/sparktup/src/trpc/server.ts:3:1]
 3 │   loggerLink,
 4 │   unstable_httpBatchStreamLink,
 5 │ } from "@trpc/client";
 6 │ import { cookies } from "next/headers";
   · ───────────────────────────────────────
 7 │ 
 8 │ import { type AppRouter } from "@/server/api/root";
 9 │ import { getUrl, transformer } from "./shared";
   ╰────

One of these is marked as a client entry with "use client":
  ./src/trpc/server.ts
  ./src/app/_components/onboarding/form.tsx

./src/trpc/server.ts
ReactServerComponentsError:

You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[/Users/viszya/Developer/Projects/sparktup/src/trpc/server.ts:3:1]
 3 │   loggerLink,
 4 │   unstable_httpBatchStreamLink,
 5 │ } from "@trpc/client";
 6 │ import { cookies } from "next/headers";
   · ───────────────────────────────────────
 7 │ 
 8 │ import { type AppRouter } from "@/server/api/root";
 9 │ import { getUrl, transformer } from "./shared";
   ╰────

One of these is marked as a client entry with "use client":
  ./src/trpc/server.ts
  ./src/app/_components/onboarding/form.tsx