Sigo recibiendo este extraño error en mi React que dice
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. Check the render method of `ContactTemplate`.
Traté de eliminar cada una de las importaciones para ver dónde está el error, pero nada funciona.
Mi ContactTemplate.jsx:
import React from 'react'; import { Container } from '~/components/interface/Container'; import PreviewBar from '~/components/PreviewBar'; import HeroFull from '~/components/HeroFull/HeroFull'; import { Wrapper, Columns, Paragraph, BigText } from './ContactTemplate.styles'; import { Link } from '~/components/interface/Link'; const ContactTemplate = ({ preview }) => { const data = [ { name: 'Name 1', job: 'Bestuursrechts', phone: '+31 (0) 612345678', email: 'Email', link: 'https://www.linkedin.com', }, { name: 'Name 2', job: 'Intellectuele eigendom en contractenrecht', phone: '+31 (0) 612345678', email: 'email', link: 'https://www.linkedin.com', }, ]; return ( <> <Wrapper> {preview && <PreviewBar />} <HeroFull title="Contact" intro="We offer ...." /> </Wrapper> <Container> <Columns> {data.map(item => ( <div> <BigText>{item.name}</BigText> <Paragraph>{item.job}</Paragraph> <Paragraph>{item.phone}</Paragraph> <Paragraph>{item.email}</Paragraph> <Link>{item.link}</Link> </div> ))} </Columns> </Container> </> ); }; export default ContactTemplate;
¿Alguien podría ayudarme con esto por favor? Si se necesitan más archivos, los agregaré a pedido.
Lo más probable es que estés intentando import { ContactTemplate } from "./ContactTemplate"
, pero estás usando export default
. En este punto, debe import ContactTemplate from "./ContactTemplate"
¿Puedes confirmar si este es el caso? ¿Puede mostrar el componente, donde importa e intenta usar ContactTemplate
?
Lo resolví yo mismo. El primer problema fue que mi Docker estaba atascado, así que tuve que reiniciarlo. Después de reiniciarlo, traté de eliminar cada importación individualmente para ver dónde estaba el problema y era el { Link }
que necesitaba ser solo Link
. ¡Gracias a todos los demás por ayudar!