Next.js Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Question

I am building a Next.js project and I get the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

When trying to import Layout component into my _app.js, but got the above error.

_app.js

import React from "react";
import "@/styles/globals.css";
import Layout from "@/components";

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

Layout.jsx

import Head from "next/head";
import React from "react";

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

const Layout = () => {
  return (
    <div className="layout">
      <Head>
        <title>Ecommerce Store</title>
      </Head>
      <header>
        <Navbar />
      </header>
      <main className="main-container">empty</main>
      <footer>
        <Footer />
      </footer>
    </div>
  );
};

export default Layout;

index.js - I created this single file to export all components

export { default as Footer } from "./Footer";
export { default as Layout } from "./Layout";
export { default as Navbar } from "./Navbar";
export { default as Product } from "./Product";
export { default as HeroBanner } from "./HeroBanner";
export { default as FooterBanner } from "./FooterBanner";
export { default as Cart } from "./Cart";

Components folder structure
enter image description here

I found similar solutions for this. But none of that helped.
(React) Element type is invalid, expected a string (for built-in components) or a class/function but got

Next Js Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

what the structure of your component folder looks like ?

Ahmed Sbai
– Ahmed Sbai

2023-03-06 04:19:43 +00:00
Commented Mar 6, 2023 at 4:19 — Ahmed Sbai
– Ahmed Sbai, Commented Mar 6, 2023 at 4:19

supun · Accepted Answer · 2023-03-06 05:26:39Z

5

The error is in the layout component, import Navbar and Footer with curly braces. When we aren't exporting a component as a default export and trying to import it as a named import (wrapped in curly braces) or vice versa because this is a common cause of the error.
Importing from a file that is located in the same directory. If we need to import from one directory up, we would do:

import Head from "next/head";
import React from "react";

import Navbar from "./Navbar";
import Footer from "./Footer";

const Layout = () => {
  return (
    <div className="layout">
      <Head>
        <title>Ecommerce Store</title>
      </Head>
      <header>
        <Navbar />
      </header>
      <main className="main-container">empty</main>
      <footer>
        <Footer />
      </footer>
    </div>
  );
};

export default Layout;

answered Mar 6, 2023 at 5:26

supun

711 gold badge2 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jevon Cochran · Accepted Answer · 2023-03-06 04:53:13Z

1

As the error message says, I think you forgot to export a component somewhere. I see that you are exporting Layout correctly. Are you doing the same in the Navbar and Footer components?

answered Mar 6, 2023 at 4:53

Jevon Cochran

1,7842 gold badges17 silver badges30 bronze badges

3 Comments

supun Over a year ago

Still I do nothing In the Navbar and Footer component. In the Layout component I use Navbar and Footer component.

Jevon Cochran Over a year ago

Can you paste the code that you have in the Navbar and Footer files?

supun Over a year ago

I just found the solution and posted an answer. so, thank you for your valuable time to answering my question. : )

Collectives™ on Stack Overflow

Next.js Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related