Next.js 13: Error adding custom component

Programming
, , , ,
1

Issue: I am receiving an error when including a custom component in my layout.jsx file. The error is Unhandled Runtime Error Error: Unsupported Server Component type: undefined. I have included both the Navbar.jsx file and the layout.jsx file with the code for clarity. I have attempted various solutions to resolve the issue, but have been unsuccessful.

Navbar.jsx:

import Link from 'next/link'
const Navbar = ()=>{
  return(
      <nav>
        <Link href="/">Home</Link>
        <Link href="/contact">Contact</Link>
        <Link href="/projects">Projects</Link>
        <Link href="/links">Links</Link>
        <Link href="/certs">Certs</Link>
      </nav>
  );
}
export default Navbar;

layout.jsx:

import "./globals.css";
import { Inter } from "next/font/google";
import { Navbar } from "../components/Navbar";

const inter = Inter({
  subsets: ["latin"],
});

export const metadata = {
  title: "Stevan's Portfolio",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <header>
          <Navbar />
        </header>
        {children}
      </body>
    </html>
  );
}
2

Answer: The error is occurring because you are importing Navbar as a named export in your layout.jsx file, but it is exported as a default export in your Navbar.jsx file. To fix the error, you need to change the import statement in your layout.jsx file to import the default export of Navbar.

Change this line in layout.jsx:

import { Navbar } from "../components/Navbar";

to:

import Navbar from "../components/Navbar";

After making this change, the error should be resolved.