I keep getting this weird error in my React that says
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`.
I tried to remove each of the import to see where the error is, but nothing works.
My 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;
Could someone help me out with this please? If there are more files needed I'll add them on request.
Most likely you're trying to import { ContactTemplate } from "./ContactTemplate"
, but you're using export default
. At this point you should import ContactTemplate from "./ContactTemplate"
Can you confirm if this is the case?
Can you show the component, where you import and trying to use ContactTemplate
?
I solved it myself. The first problem was that my Docker was stuck so I had to restart it. After I restarted it I tried to remove each import individually to see where the problem was and it was the { Link }
that needed to be just Link
. Thanks everyone else for helping!