tRPC error in app Router (undefined headers)

Question

I use the tRPC file structure from Jack Herringtons video
I added clerk auth for protected routes and set the create Context in the route handler:

createContext: () = createTRPCContext(req),

interface AuthContext {
  auth: SignedInAuthObject | SignedOutAuthObject
}
const createInnerTRPCContext = async ({ auth }: AuthContext) = {
  return {
    auth,
  }
}

export const createTRPCContext = async (req: NextRequest) = {
  return await createInnerTRPCContext({ auth: getAuth(req) })
}

export type Context = trpc.inferAsyncReturnType

export const t = initTRPC.context().create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError: error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    }
  },
})

export const createTRPCRouter = t.router

but this results in the following error:

error TypeError: Cannot read properties of undefined (reading 'headers')
     at eval (webpack-internal:///(rsc)/../../nodemodules/.pnpm/next@13.4.19@babel+core@7.22.9react-dom@18.2.0react@18.2.0/node_modules/next/dist/server/future/route-modules/app-route/module.js:266:61)
     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
`

tRPC error in app Router (undefined headers)

Looking for more? Join the community!