React中Chakra UI的Card组件抛出31个错误求助

数据老陈

2026-8-11

Chakra UI Card组件抛出31个错误导致页面崩溃，其余组件正常工作

问题描述

代码编译无任何错误，但只要使用Chakra UI的Card组件，页面访问时直接崩溃，控制台抛出31个相关错误。其余Chakra UI组件（如Box、Button、Image等）均可正常运行。

已尝试创建仅引入Chakra模块的全新React项目，仍出现相同控制台错误，且页面显示空白。

相关代码

import { Box, Button, Card, CardBody, CardFooter, Divider, Heading, Image, Stack, Text } from '@chakra-ui/react'

export default function App() {
  return (
    <Card maxW='md' borderWidth='1px' borderRadius='lg' overflow='hidden'>
      <Image src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
      <CardBody>
        <Stack spacing='3'>
          <Box display='flex' alignItems='baseline'>
            <Box
              color='gray.500'
              fontWeight='semibold'
              letterSpacing='wide'
              fontSize='xs'
              textTransform='uppercase'
              ml='2'
            >
              Member since May 2021
            </Box>
          </Box>
          <Heading size='md'>Dan Abramov</Heading>
          <Text color='gray.500'>
            Working on making React accessible for everyone.
          </Text>
        </Stack>
      </CardBody>
      <Divider />
      <CardFooter>
        <Button variant='solid' colorScheme='blue'>
          Follow
        </Button>
        <Button variant='ghost' colorScheme='blue'>
          Message
        </Button>
      </CardFooter>
    </Card>
  )
}