Principal.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;índice.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> ); }El error: Error: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: indefinido. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre.
Por favor, por favor, la solución.
Como cmgchess al que se alude en los comentarios, ya que está utilizando export default Main; no lo importas como una función con nombre.
Cambia esto: import { Main } from './Main/Main'; a esto: import Main from './Main/Main';
Si eso no funciona, vea si puede obtener una versión más simple de Main para importar. Prueba algo como:
function Main() { return ( <div> Main imported </div> ); }Si puede hacer que funcione, vuelva a agregar los otros componentes uno por uno hasta que encuentre cuál está causando el problema.