Next Js 错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义

Posted 2023-03-07

【中文标题】Next Js 错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义

【英文标题】：Next Js Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

【发布时间】：2021-11-11 14:38:48

【问题描述】：

完全错误：错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

尝试将组件导入我的 Nextjs 页面，但出现上述错误。当我将组件中的所有代码放入我的页面时，它呈现得非常好，但是当我导入它时，我得到一个错误。

这是主页代码：

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  
                            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)
    

这是我要导入的组件：

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>
    )

不知道为什么不能正确渲染。

【问题讨论】：

你是如何导入你的组件的？

从 '../../components/LinkBoxModal' 导入 LinkBoxModal

错了......你应该像import LinkBoxModal from '../../components/LinkBoxModal' 这样导入你的组件，因为它是默认导出

【参考方案1】：

我之前遇到过这个问题，我在每个组件上都导入了 react 模块，它的工作原理就像魔术一样！！

import React from 'react';