Hi @shell gulch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#TRPC - You're importing a component that needs next/headers. That only works in a Server Component w
chrome saddleBOT
Based on the error message you provided, it seems like you're trying to import a server-only component or module in a file that's not a server component. In Next.js, server components are not supported in the pages/ directory.
The error message is specifically pointing to the import { headers } from "next/headers"; line in your src/trpc/server.ts file. The next/headers module is a server-only module and can only be imported in server components.
To resolve this issue, you should move the server-only code to a server component or use dynamic imports to conditionally import the server-only module only on the server side.
Unfortunately, the knowledge sources provided do not contain specific examples of how to do this in Next.js. For more information, you can refer to the Next.js documentation on Server Components (https://nextjs.org/docs/basic-features/pages#server-side-rendering) and Dynamic Imports (https://nextjs.org/docs/advanced-features/dynamic-import).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
shell gulch
TRPC - You're importing a component that needs next/headers. That only works in a Server Component w