Next.js Discord

Discord Forum

Error: Unsupported Server Component type: undefined

Unanswered
Pigeon tremex posted this in #help-forum
Open in Discord
Pigeon tremexOP
help I got this error while doing the [tutorial](https://nextjs.org/learn/dashboard-app/navigating-between-pages) from the official website
Error: Unsupported Server Component type: undefined

and here is my fully code for app/ui/dashboard/nav-links.tsx

"use client";

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from "@heroicons/react/24/outline";
import clsx from "clsx";
import Link from "next/link";
import { usePathname } from "next/navigation";

// Map of links to display in the side navigation.
// Depending on the size of the application, this would be stored in a database.
const links = [
  { name: "Home", href: "/dashboard", icon: HomeIcon },
  {
    name: "Invoices",
    href: "/dashboard/invoices",
    icon: DocumentDuplicateIcon,
  },
  { name: "Customers", href: "/dashboard/customers", icon: UserGroupIcon },
];

export default function NavLinks() {
  const pathname = usePathname();
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className={clsx(
              "flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3",
              {
                "bg-sky-100 text-blue-600": pathname === link.href,
              }
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}


the errors shows on the screen:

7 Replies

Arinji
@Pigeon tremex show your page.tsx / wherever you call this
@Arinji <@707066368759169084> show your page.tsx / wherever you call this
Pigeon tremexOP
Hi, I'm following the tutorial, and the files related should keep the same with it . 
// app/dashboard/layout.tsx
import SideNav from "@/app/ui/dashboard/sidenav";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}


// app/ui/dashboard/sidenav.tsx
import Link from 'next/link';
import NavLinks from '@/app/ui/dashboard/nav-links';
import AcmeLogo from '@/app/ui/acme-logo';
import { PowerIcon } from '@heroicons/react/24/outline';

export default function SideNav() {
  return (
    <div className="flex h-full flex-col px-3 py-4 md:px-2">
      <Link
        className="mb-2 flex h-20 items-end justify-start rounded-md bg-blue-600 p-4 md:h-40"
        href="/"
      >
        <div className="w-32 text-white md:w-40">
          <AcmeLogo />
        </div>
      </Link>
      <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
        <NavLinks />
        <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
        <form>
          <button className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
            <PowerIcon className="w-6" />
            <div className="hidden md:block">Sign Out</div>
          </button>
        </form>
      </div>
    </div>
  );
}
@Pigeon tremex help I got this error while doing the [tutorial](https://nextjs.org/learn/dashboard-app/navigating-between-pages) from the official website Error: Unsupported Server Component type: undefined and here is my fully code for app/ui/dashboard/nav-links.tsx tsx "use client"; import { UserGroupIcon, HomeIcon, DocumentDuplicateIcon, } from "@heroicons/react/24/outline"; import clsx from "clsx"; import Link from "next/link"; import { usePathname } from "next/navigation"; // Map of links to display in the side navigation. // Depending on the size of the application, this would be stored in a database. const links = [ { name: "Home", href: "/dashboard", icon: HomeIcon }, { name: "Invoices", href: "/dashboard/invoices", icon: DocumentDuplicateIcon, }, { name: "Customers", href: "/dashboard/customers", icon: UserGroupIcon }, ]; export default function NavLinks() { const pathname = usePathname(); return ( <> {links.map((link) => { const LinkIcon = link.icon; return ( <Link key={link.name} href={link.href} className={clsx( "flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3", { "bg-sky-100 text-blue-600": pathname === link.href, } )} > <LinkIcon className="w-6" /> <p className="hidden md:block">{link.name}</p> </Link> ); })} </> ); } the errors shows on the screen:
Almond stone wasp
I also got this error. Any help would be greatly appreciated
changing the NavLinks component to a named export rather than the default export fixes the issue, but can anyone explain what is the issue in the first place? this docs page uses default exports for defining a client component, so it's not like that's not allowed https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs
crazy enough after restarting the dev server I can't reproduce the issue even with a default export, lol. maybe a bug with fast refresh
Almond stone wasp
This worked. thank you.