You're importing a component that needs next/headers

Unanswered

Blue Picardy Spaniel posted this in #help-forum

Blue Picardy SpanielOP

2024-04-14T09:44:57.255Z

logout.tsx:

import { lucia, validateRequest } from "@/lib/auth";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { LogOut as LogoutIcon } from "lucide-react";
import { cookies } from "next/headers";

export default function Logout() {
  async function logout() {
    const { session } = await validateRequest();
    if(!session) return;

    await lucia.invalidateSession(session.id);

    const sessionCookie = lucia.createBlankSessionCookie();
    cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
  }

  return (
    <div>
      <DropdownMenuItem className="cursor-pointer">
        <LogoutIcon className="mr-2 h-4 w-4 text-red-500" />

        <form action={logout}>
          <button className="text-red-500">Log out</button>
        </form>
      </DropdownMenuItem>
    </div>
  );
}

You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory.

14 Replies

@Blue Picardy Spaniel `logout.tsx`: ts import { lucia, validateRequest } from "@/lib/auth"; import { DropdownMenuItem } from "@/components/ui/dropdown-menu"; import { LogOut as LogoutIcon } from "lucide-react"; import { cookies } from "next/headers"; export default function Logout() { async function logout() { const { session } = await validateRequest(); if(!session) return; await lucia.invalidateSession(session.id); const sessionCookie = lucia.createBlankSessionCookie(); cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes); } return ( <div> <DropdownMenuItem className="cursor-pointer"> <LogoutIcon className="mr-2 h-4 w-4 text-red-500" /> <form action={logout}> <button className="text-red-500">Log out</button> </form> </DropdownMenuItem> </div> ); } You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory.

Ray

2024-04-14T09:46:06.655Z

async function logout() {
    'use server'
    const { session } = await validateRequest();
    if(!session) return;

    await lucia.invalidateSession(session.id);

    const sessionCookie = lucia.createBlankSessionCookie();
    cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
  }

Blue Picardy SpanielOP

2024-04-14T09:47:08.843Z

./src/components/navbar/logout.tsx
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
  │ 
  │ 
   ╭─[C:\Users\Ethan\Desktop\Projects\watchdog-website\src\components\navbar\logout.tsx:1:1]
 1 │ import { lucia, validateRequest } from "@/lib/auth";
 2 │ import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 3 │ import { LogOut as LogoutIcon } from "lucide-react";
 4 │ import { cookies } from "next/headers";
   · ───────────────────────────────────────
 5 │ 
 6 │ export default function Logout() {
 6 │   async function logout() {
   ╰────

  × It is not allowed to define inline "use server" annotated Server Actions in Client Components.
  │ To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component.
  │ 
  │ Read more: https://nextjs.org/docs/app/api-reference/functions/server-actions#with-client-components
  │ 
    ╭─[C:\Users\Ethan\Desktop\Projects\watchdog-website\src\components\navbar\logout.tsx:4:1]
  4 │     import { cookies } from "next/headers";
  5 │     
  6 │     export default function Logout() {
  7 │ ╭─▶   async function logout() {
  8 │ │       "use server";
  9 │ │   
 10 │ │       const { session } = await validateRequest();
 11 │ │       if(!session) return;
 12 │ │   
 13 │ │       await lucia.invalidateSession(session.id);
 14 │ │   
 15 │ │       const sessionCookie = lucia.createBlankSessionCookie();
 16 │ │       cookies().set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
 17 │ ╰─▶   }
 18 │     
 19 │       return (
 19 │         <div>
    ╰────

now im getting this

@Blue Picardy Spaniel now im getting this

Ray

2024-04-14T09:47:31.484Z

where do you render <Logout />?

@Ray where do you render `<Logout />`?

Blue Picardy SpanielOP

2024-04-14T09:48:10.205Z

ohhhh in a client component, but i dont understand why i cant mix client and server components

@Blue Picardy Spaniel ohhhh in a client component, but i dont understand why i cant mix client and server components

Ray

2024-04-14T09:48:44.273Z