Sigo recibiendo este error cuando npm run dev
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. This error happened while generating the page. Any console logs will be displayed in the terminal window. Sin embargo, cuando hago npm run build y luego npm run start , el sitio se carga bien. Es solo en el servidor de desarrollo que da ese error. El sitio también se implementa en Vercel sin ningún problema.
¿Alguna idea de por qué obtengo esto en el servidor de desarrollo y no en producción?
Además, intenté eliminar la carpeta .next , también eliminé node_modules e instalé todos los paquetes nuevamente, todavía da un error. Implementado en diferentes sitios de Vercel y todos estaban bien.
Aquí está el error completo:
Server 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. This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack ReactDOMServerRenderer.render [project]/node_modules/react-dom/cjs/react-dom-server.node.development.js (4053:17) ReactDOMServerRenderer.read [project]/node_modules/react-dom/cjs/react-dom-server.node.development.js (3690:29) Object.renderToString [project]/node_modules/react-dom/cjs/react-dom-server.node.development.js (4298:27) Object.renderPage [project]/node_modules/next/dist/server/render.js (596:45) Function.getInitialProps node_modules/next/dist/pages/_document.js (150:43) Object.loadGetInitialProps [project]/node_modules/next/dist/shared/lib/utils.js (69:29) renderDocument [project]/node_modules/next/dist/server/render.js (609:48) Object.renderToHTML [project]/node_modules/next/dist/server/render.js (647:34) runMicrotasks <anonymous> processTicksAndRejections internal/process/task_queues.js (97:5)Puedo adivinar 3 cosas:
hay un paquete o función que está utilizando solo en el entorno de desarrollo, por lo que se omite durante la producción. Verifique especialmente sus paquetes dev-dependency desarrollo y sus archivos de config . Si tiene una configuración que ejecuta solo un entorno de desarrollo y dentro está importando un módulo de manera incorrecta
en getServerSideFunctions en función de su variable de entorno, es posible que devuelva undefined en el entorno de desarrollo, pero en producción, dado que pasa las variables de entorno correctas, puede obtener valores correctos. así que asegúrese de estar utilizando las variables de entorno correctas en su aplicación.
De alguna manera, en el entorno de desarrollo, está exportando undefined si tiene una operación ternaria. En el entorno de desarrollo, su exportación se resolvió como undefined , pero según la condición, exporta el componente correcto en producción.
⛳ Puede encontrar el error paso a paso si falla en un paso y luego vaya al siguiente:
getInitialProps .page deben exportarse como export default ComponentName de exportación.npm run build cambie el nombre de la carpeta .next a .next-prod , luego npm run dev , compare esas 2 carpetas.no sucede en la compilación de producción porque la compilación de producción no atiende el error del lado del cliente. Mostrará el error del lado del clientehttps://nextjs.org/docs/messages/client-side-exception-occurred así en la mayoría de los casos en la compilación de producción
Así que creo que su error ocurre cuando maneja algo en el lado del cliente.
Puede verificar este problema probando muchas cosas para verificar. Mi recomendación es usar Typescript, ts lint, prettier y otras herramientas para ayudar a depurar este problema mientras lo desarrolla.
Creo que este también sería un buen comienzo . ¿Cómo verificar el código JavaScript del lado del cliente para detectar errores de sintaxis?