Sigo recibiendo un mensaje de error en vercel cuando quiero implementar mi sitio web. El error es: Enlace
cuando lo implemento localmente, no hay ningún problema. No sé por qué estoy recibiendo este error. mi archivo ImageScrollbar.jsx es:
import { useContext } from 'react'; import Image from 'next/image'; import { Box, Icon, Flex } from '@chakra-ui/react'; import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu'; import { FaArrowAltCircleLeft, FaArrowAltCircleRight } from 'react-icons/fa'; const LeftArrow = () => { const { scrollPrev } = useContext(VisibilityContext); return ( <Flex justifyContent='center' alignItems='center' marginRight='1'> <Icon as={FaArrowAltCircleLeft} onClick={() => scrollPrev()} fontSize='2xl' cursor='pointer' d={['none','none','none','block']} /> </Flex> ); } const RightArrow = () => { const { scrollNext } = useContext(VisibilityContext); return ( <Flex justifyContent='center' alignItems='center' marginLeft='1'> <Icon as={FaArrowAltCircleRight} onClick={() => scrollNext()} fontSize='2xl' cursor='pointer' d={['none','none','none','block']} /> </Flex> ); } export default function ImageSrollbar({ data }) { return ( <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow} style={{ overflow: 'hidden' }} > {data.map((item) => ( <Box width='910px' itemId={item.id} overflow='hidden' p='1'> <Image placeholder="blur" blurDataURL={item.url} src={item.url} width={1000} height={500} sizes="(max-width: 500px) 100px, (max-width: 1023px) 400px, 1000px" alt=""/> </Box> ))} </ScrollMenu> ); }¿Alguien puede ayudarme por favor?