smolensk Posts - Answer Overflow

smolensk

Explore posts from servers

•Created by smolensk on 12/17/2024 in #questions

RSC error

loading a server component gives me this error

import { Button } from "@/components/ui/button";
import { getServerAuthSession } from "@/server/auth";
import { Rocket } from "lucide-react";
import Link from "next/link";
async function Header() {
  const session = await getServerAuthSession();
  const user = session?.user;
  return (
    <header className="flex h-14 items-center px-4 lg:px-6">
      <Link className="flex items-center justify-center" href="#">
        <Rocket className="mr-2 h-6 w-6" />
        <span className="font-bold">Home</span>
      </Link>
</header/>
)
}

export default function Page(){
return
(
...
<Header/>
)
}
'Header' cannot be used as a JSX component.
  Its type '() => Promise<Element>' is not a valid JSX element type.
    Type '() => Promise<Element>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Promise<Element>' is not assignable to type 'ReactNode'.ts(2786)

import { Button } from "@/components/ui/button";
import { getServerAuthSession } from "@/server/auth";
import { Rocket } from "lucide-react";
import Link from "next/link";
async function Header() {
  const session = await getServerAuthSession();
  const user = session?.user;
  return (
    <header className="flex h-14 items-center px-4 lg:px-6">
      <Link className="flex items-center justify-center" href="#">
        <Rocket className="mr-2 h-6 w-6" />
        <span className="font-bold">Home</span>
      </Link>
</header/>
)
}

export default function Page(){
return
(
...
<Header/>
)
}
'Header' cannot be used as a JSX component.
  Its type '() => Promise<Element>' is not a valid JSX element type.
    Type '() => Promise<Element>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Promise<Element>' is not assignable to type 'ReactNode'.ts(2786)

3 replies

TTCTheo's Typesafe Cult

•Created by smolensk on 4/29/2024 in #questions

redirect issues

I have issues with redirect not working properly when called from a server actions , the account deletion work as intended but

redirect('/')

redirect('/')

doesn't seems to work it just finish the task and remain on the same page what am I missing am using app-router with drizzle-orm

"use server";
import { redirect } from "next/navigation";
export async function deleteProfile() {
  const session = await getServerAuthSession();
  if (!session) return { message: "Unauthorized" };
  try {
    await db
      .delete(users)
      .where(eq(users.id, session.user.id))
      .catch((e) => {
        console.log(e);
      });
    revalidatePath("/dashboard/settings/profile");
    redirect("/");
  } catch (error) {
    return { message: "Error deleting profile" };
  }
}
//client code
'use client'
<Button variant="destructive" onClick={() => deleteProfile()} type="submit">
      delete profile
    </Button>

"use server";
import { redirect } from "next/navigation";
export async function deleteProfile() {
  const session = await getServerAuthSession();
  if (!session) return { message: "Unauthorized" };
  try {
    await db
      .delete(users)
      .where(eq(users.id, session.user.id))
      .catch((e) => {
        console.log(e);
      });
    revalidatePath("/dashboard/settings/profile");
    redirect("/");
  } catch (error) {
    return { message: "Error deleting profile" };
  }
}
//client code
'use client'
<Button variant="destructive" onClick={() => deleteProfile()} type="submit">
      delete profile
    </Button>

7 replies

Gaming

Programming