CODEWITHSUNDEEP
importnext.js
beginnersLuck.css
beginnersLuck.css

Reputation: 65

import multiple components with one Line (Next js)

I am trying to call multiple components into a page in the same line

Component tree

in the index.js file, it is importing the components and exporting them

import Header from "./Header/Header";
import Navbar from "./Navbar/Navbar";

const exportedObject = {
    Header,
    Navbar,
};

export default exportedObject;

and adding the imports to the page

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

        <div>
            <Header title="about page" />
            <Navbar />
            <h1>About</h1>
            <p>THIS is the about page</p>
        </div>

I keep getting this 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.

trying to get it working this set-up but I don't know what I have done wrong

EDIT: this is how I am exporting the files

export function Navbar() {
    return (
        <div>
            <h1>this is a navbar</h1>
        </div>
    );
}

Upvotes: 0

Views: 1301

Answers (2)

iamhuynq
iamhuynq

Reputation: 5529

You should export default your component

export default function Navbar() {
    return (
        <div>
            <h1>this is a navbar</h1>
        </div>
    );
}

and remove default export in exportedObject component

const exportedObject = {
    Header,
    Navbar,
};

export exportedObject;

Upvotes: 0

beginnersLuck.css
beginnersLuck.css

Reputation: 65

In the index file

export * from "./Header/Header";
export * from "./Navbar/Navbar";

Upvotes: 1

Related Questions