#NextJS13 - That only works in a Server Component but one of its parents is marked with use client

4 messages · Page 1 of 1 (latest)

mint mango
#

Normally this error is pretty easy to spot, but the error message is telling me that one of two functions do "use client"; when in fact they dont. I just created a super simple API endpoint in pages/api/invite.ts which looks like this:

invite.ts
`import type { NextApiRequest, NextApiResponse } from 'next';
import { createServerClient } from '../../utils/supabase-server';
import { UserResponse } from '@supabase/gotrue-js/dist/module/lib/types';

export default async function handler(req: NextApiRequest, res: NextApiResponse<void>) {
// do stuff
}`

Then i have my supabase client:
`import 'server-only';
import { headers, cookies } from 'next/headers';
import { createServerComponentSupabaseClient } from '@supabase/auth-helpers-nextjs';
import { Database } from '../db_types';

export const createServerClient = () =>
createServerComponentSupabaseClient<Database>({
headers,
cookies,
});`

Now when requesting this API endpoint from the frontend i get this famous error (see screenshot) where he tell me that either invite.ts or supabase-server.ts uses the "use client" flag, which is wrong. Dont have any clue how to get rid of it. Thanks for any hint.

#

Funny side note: I use this supabase-server component without problems in server-components inside my /app folder. So this makes me think if there are some problems with the pages/api folder in a way that they behave differently than normal server components. But up until now i thought that pages/api is as server as it gets right?

mint mango
#

I simplified the error with this single function:

pages/api/test.js
`import { headers, cookies } from 'next/headers';

export default function handler(req,res) {
console.log(headers);
res.status(200).json({ name: 'John Doe' })
}`

NextJS v13.1.1

worn plinth
#

I think nextjs still treats everything inside the pages directory as client components (they forgot to exclude pages/api)