Main.js
import {
Navbar,
Footer,
Landing,
About,
Skills,
Testimonials,
Blog,
Contacts,
Projects,
Services,
Portfolio,
} from "../../components";
function Main() {
return (
<div>
<Navbar />
<Landing />
<About />
<Skills />
<Projects />
<Portfolio />
<Services />
<Testimonials />
<Blog />
<Contacts />
<Footer />
</div>
);
}
export default Main;
index.js
import { Head } from "next/Head";
import { Main } from './Main/Main';
import { headerData } from "../data/headerData";
export default function Home() {
return (
<div>
<Head>
<title>{headerData.name}</title>
<link rel="icon" href="./channels4_profile.jpg" />
</Head>
<Main />
</div>
);
}
The 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.
Please Please The Solution
Like cmgchess alluded to in the comments, since you are using export default Main; you don't import it as a named function.
Change this:
import { Main } from './Main/Main';
to this:
import Main from './Main/Main';
If that doesn't work, see if you can get a simpler version of Main to import at all. Try something like:
function Main() {
return (
<div>
Main imported
</div>
);
}
If you can get that working, add back the other components one by one until you find which one is causing the issue.