Me sale el error cuando quiero hacer un slider y he buscado varias alternativas para solucionarlo pero ninguna funciona. El error está en useEffect(() => {setWidth (carousel.current.scrollWidth - carousel.current.offsetWidth)}, []); y en carrusel.actual
import React from "react"; import { motion } from "framer-motion"; import { useRef, useEffect, useState } from "react"; import images from "../images"; function Sliders() { const [width, setWidth] = useState(0); const carousel = useRef(); useEffect(() => { setWidth (carousel.current.scrollWidth - carousel.current.offsetWidth) }, []); return ( <div className="Sliders"> <motion.div red={carousel} className="carusel" whileTap={{cursor: "grabbing"}} > <motion.div drag="x" dragConstraints={{ right: 0, left: -width}} className="inner-carousel" > {images.map((image) => { return ( <motion.div className="item" key={image}> <img src={image} alt="" /> </motion.div> ); })} </motion.div> </motion.div> </div> ); } export default SlidersCuando se inicia el componente, inicialmente el valor de carousel.current no está definido. Simplemente envuelva la declaración en condición if, y creo que debería funcionar.
useEffect(() => { if (carousel?.current) { setWidth (carousel.current.scrollWidth - carousel.current.offsetWidth) } }, []);Nota: puede intentar consolar carousel.current antes de la declaración de devolución para asegurarse de cuándo el objeto no está definido y en qué punto se llena.