Calling a Client Component is causing compiler issues
Answered
Broken Nokia posted this in #help-forum
Here is the console error log since i'm having issues uploading an image of the console:
I am using Supabase Auth, that's where I'm calling the cookies() function.
The root page.tsx file includes the Cart-Total component at the bottom which is a client component. This error goes away when I comment on this component.
I don't understand what is causing this issue since calling a client-rendered component in a page that is rendered on the server is allowed.
It also mentions that server components are not supported by the pages router when I'm using the app router. This could just be extra information and not necessarily the compiler thinking I'm using the pages router.
I've been racking my brains unable to understand this. Any help is greatly appreciated.
○ Compiling / ...
⨯ ./src/utils/supabase/server.ts
Error:
× 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/getting-started/
│ react-essentials#server-components
│
│
╭─[D:\Workspaces\WebDev\zo-house-user-frontend\src\utils\supabase\server.ts:1:1]
1 │ import { createServerClient, type CookieOptions } from "@supabase/ssr";
2 │ import { cookies } from "next/headers";
· ───────────────────────────────────────
3 │
4 │ export function createClient() {
4 │ const cookieStore = cookies();
╰────
Import trace for requested module:
./src/utils/supabase/server.ts
./src/app/page.tsx
./src/app/cart-total.tsxI am using Supabase Auth, that's where I'm calling the cookies() function.
The root page.tsx file includes the Cart-Total component at the bottom which is a client component. This error goes away when I comment on this component.
I don't understand what is causing this issue since calling a client-rendered component in a page that is rendered on the server is allowed.
It also mentions that server components are not supported by the pages router when I'm using the app router. This could just be extra information and not necessarily the compiler thinking I'm using the pages router.
I've been racking my brains unable to understand this. Any help is greatly appreciated.
Answered by Broken Nokia
a server component cannot export anything apart from functions
48 Replies
Here's the server.ts file being referred to in the error:
import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { cookies } from "next/headers";
export function createClient() {
const cookieStore = cookies();
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
getAll() {
return cookieStore.getAll();
},
setAll(cookiesToSet) {
try {
cookiesToSet.forEach(({ name, value, options }) =>
cookieStore.set(name, value, options)
);
} catch {
// The `setAll` method was called from a Server Component.
// This can be ignored if you have middleware refreshing
// user sessions.
}
},
},
}
);
}Taken straight out of supabase docs for SSR
Well, that's when you use a supabase instance in server component
I assume you followed this, right?
@Broken Nokia
see @Broken Nokia you are creating a server client
you imported createServerClient
you imported createServerClient
there is another one called
createBrowserClientimport { createBrowserClient } from '@supabase/ssr'
export function createClient() {
return createBrowserClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
}it's okay - you seems to be working on auth
check the step 3, you have a tab to switch client/server
Correct, I copied the code as is
@Broken Nokia
before you copy the code, please take some time to read the doc
To access Supabase from your Next.js app, you need 2 types of Supabase clients:Yes, Ive got both of them in my project. There's a client.ts file exporting a function to create a browserClient and another server.ts file exporting a function for the serverClient
yeah, so the issue is from using supabase server instance in your client component
I'm using the server instance in the page.tsx file that is server rendered
Not in the client component. I'm not creating a supabase instance at all in the client component
Not in the client component. I'm not creating a supabase instance at all in the client component
I'm just calling the client component (Cart-Total component) inside my page.tsx file
show me the whole code then
show me <CardTotal />
aha, wait, are you using page directory?
nope, using the app router
but you are getting this error
You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory.show me <CardTotal /> !
show me
useCart and give me a screenshot of your directory structure
i think i might have figured it out, give me a few mins to test it out and i'll let you know if i got it or not
yep, i got it
i was exporting a type and an array
Answer
did you export them from supabase/server.ts?
nope
oh I see
from page.tsx?
yes
and you used them in client component?
oh man
and server components can only export functions
so the page.tsx file was not considered as a server component (even though it should be by default when there is no "use client" directive)
so the page.tsx file was not considered as a server component (even though it should be by default when there is no "use client" directive)
thank you for time regardless, i appreciate you helping me debug this issue
have a great day/night
yr welcome!