which file did you access the cookies?

which files imports next/headers?

what is

// use state and other client component stuff

?

@Indian mackerel how ?

i dont really remember but i didnt use use in the end, i used an async function with await

I got this :

using next.js 14

// session.ts
import { cookies } from 'next/headers';

export function getToken() {
    const session = cookies().get('session')?.value;
    if (!session) return null;
    return session;
}

// layout.tsx
import { getToken } from '@/libs/session';

export default function MainLayout({ children }: { children: ReactNode }) {
    const token = getToken();

    return (
        <div>
            <Navbar />
            <div>
                {children}
            </div>
        </div>
    );
}

If im getting my token like this I have no errors, but if a deport my getToken inside Navbar

export const Navbar = () => {
    const token = getToken();
    console.log(token);

    return <></>;
}

I got error :
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.

is navbar a client component?

no, there is no "use client" at the top

What's the rest of the error?

Ive tried to update next.js version and now, got 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.
   ╭─[components/ui/navigation/navbar/Navbar.tsx:3:1]
 3 │ // import { NavLink } from '../navlink/NavLink';
 4 │ 
 5 │ import { getToken } from '@/libs/session';
 6 │ import { cookies } from 'next/headers';
   · ───────────────────────────────────────
 7 │ 
 8 │ // export const navLinks = [
 9 │ //     {
Import trace for requested module:
./src/components/ui/navigation/navbar/Navbar.tsx
./src/components/ui/navigation/navbar/index.ts
./src/components/ui/navigation/index.ts
./src/components/ui/index.ts
./src/components/ui/buttons/BackButton.tsx

Im so confused as im using app dir right now...

ah

the file containing getToken() needs to be in the app directory

based on this https://github.com/vercel/next.js/issues/49757#issuecomment-1911540734

in the app directory ? .. ok.. but even if im using cookies() directly in Navbar got the same error

export const Navbar = () => {
    // const token = getToken();
    const token = cookies().get('session')?.value;
    console.log(token);

mmh ok but Navbar is not inside app directory

yeah its a little odd.. seems like it would make sense if it instead took the location of the end of the import chain rather than the start, but i'm sure there's a good reason for it

this is so weird

even if my component is server component I can't use headers

so what would be the best way to use cookies ? prop drilling is so painful

i would probably move the components folder inside app

but maybe there's something we're missing, seems odd that it cares where the component is. in theory you should be able to keep them outside app and they're still server components and can use stuff inside next/headers

maybe @Multiflora rose seed chalcid can help on this ? As I was doing this auth through cookies using this video. (without the encrypt/decrypt part) https://www.youtube.com/watch?v=DJvM2lSPn6w

Bump

which version ? are there versions where you cannot reproduce the issue

The last one

so you'd want to open a bug ticket indeed

I dont want, might be on purpose

Please create a new post. And also dont ping other people thats not in the conversation.