'Element type is invalid: expected a string, using JSX to define a component

Just following some basic guides and got issues already. I can't see the problem with the below code but i'm getting the error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Navbar.

Can someone point where i'm going wrong please? Will use server side rendering some point but for now i'm just trying to get the design and layout done.

// _app.tsx

import Layout from '../components/Layout'
import '../styles/globals.css';

import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
  )
}

export default MyApp

// index.tsx

import type {NextPage} from 'next'

const Home: NextPage = () => {
    return (
        <div>
            <h1 className="text-3xl font-bold underline">
                Header
            </h1>
        </div>
    )
}

export default Home

// Layout.jsx

import Navbar from './Navbar';
import Head from "next/head";

const Layout = ({children}) => {
    return (
        <>
            <Navbar />

            <div className="bg-background h-full">
                <Head>
                    <title>Test</title>
                </Head>

                <main>
                    {children}
                </main>
            </div>
        </>
    )
}
export default Layout

// Navbar.jsx

import Link from "next";

function Navbar() {
    return (
        <nav>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/">About</Link>
                </li>
                <li>
                    <Link to="/">Menu</Link>
                </li>
                <li>
                    <Link to="/">Gallery</Link>
                </li>
            </ul>
        </nav>
    )
}
export default Navbar

javascript reactjs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Element type is invalid: expected a string, using JSX to define a component

Sources

Related Questions