Next Js Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Question

Full 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.

Trying to import a component into my Nextjs page, but got the above error. When I put all the code from the component into my page, it renders perfectly fine, but when I import it I get an error.

Here's the main page code:

export default function DealsList({data}){

    const { toggleColorMode } = useColorMode();

    return (<>
            <Button onClick={toggleColorMode}><SunIcon /></Button>
            <Box w={500} p={4} m="20px auto">
                <Heading as="h1" size="xl" textAlign="center">
                    Welcome to Stealz
                </Heading>
                <Heading as="h2" size="l" textAlign="center" m={5}>
                    Games on Sale
                </Heading>
                </Box>
                {data.map((deal) => (
                    <div key={deal.dealID}>
                        <Center>
                        <Box width="lg" 
                            borderWidth="1px"
                            _hover={{ bgGradient: "linear(to-r, gray.300, yellow.400, pink.200)" }}
                            mb="2" 
                            p={4}
                            rounded="lg" 
                            overflow="hidden"
                            shadow="1px 1px 3px rgba(0,0,0,0.3)"
                            >
                         
                        <Box
                            mt="1"
                            ml = "2"
                            mr = "2"
                            p={3}
                            fontWeight="semibold"
                            as="h4"
                            lineHeight="tight"
                            isTruncated
                            textAlign="center"
                            >
                            <Heading size="l">{deal.title}</Heading>
                        </Box>
                    
                        <Center><Image src={deal.thumb} alt={deal.title} /></Center>
                        <Center><Box p="6" textAlign="center">
                            <Box d="flex" alignItems="baseline">
                            <Badge borderRadius="full" px="2" colorScheme="teal">
                                Sale Price: ${deal.salePrice} 
                            </Badge>
                            <Box
                                color="gray.500"
                                fontWeight="semibold"
                                letterSpacing="wide"
                                fontSize="xs"
                                textTransform="uppercase"
                                ml="2"
                            >
                                &bull; Normal Price: ${deal.normalPrice}
                            </Box>
                            
                        </Box>
                        <LinkBoxModal />
                    </Box>
                    </Center>
                    </Box>
                    </Center>
                    </div>
                ))}
            </>  
        )
}

export async function getStaticProps(){
    try{
        const res = await axios.get('sadfasdfasdf')
        const data = res.data
        console.log(data)
        return { props: { data }}
    }
    catch(err){
        console.log(err)
    }
}

And here's the component I am trying to import:

export default function LinkBoxModal(){
    return (
        <Popover>
            <PopoverTrigger>
                <Button>Get it Now!</Button>
            </PopoverTrigger>
            <PopoverContent>
                <PopoverArrow />
                <PopoverCloseButton />
                <PopoverHeader>Link to Game:</PopoverHeader>
                <PopoverBody>[Insert Link]</PopoverBody>
            </PopoverContent>
        </Popover>
    )
}

Not sure why this isn't rendering properly.

Lindemann

how are you importing your component? – Starkey

import { LinkBoxModal } from '../../components/LinkBoxModal' – Lindemann

thats wrong... you should import your component like this import LinkBoxModal from '../../components/LinkBoxModal' since it is the default export – Starkey

I am having the same problem but only if I refresh some pages. If I get to those pages by a link, it works fine. Any ideas? – Zielinski

Please answer this #73733987 – Fatigue

Answer 1

I faced this problem before for my case i'm imported react module on every component and its works like magic!!

import React from 'react';

Stricklan

🤦‍♀️ This was my issue with import Image from "next/image". Just move the react import above the image import. – Magazine

Answer 2

Same Error but my problem was about import. In components folder I have Header.jsx and Layout.jsx.

import Header from "./"

and i changed to:

import Header from "./Header"

it works

Counterproductive