Búsqueda de sitios web

reactjs - Error de hidratación de Next.js con el componente Dialog de Shadcn

Estoy encontrando un error de hidratación en un proyecto de Next.js al usar el componente Dialog de Shadcn. El mensaje de error es:

"La hidratación falló porque la interfaz de usuario inicial no coincide con lo que se renderizó en el servidor."

Aquí están los componentes clave:

modal.tsx:

// Importing Dialog components from Shadcn
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";

interface ModalProps {
  title: string;
  description: string;
  isOpen: boolean;
  onClose: () => void;
  children?: React.ReactNode;
}

export const Modal: React.FC<ModalProps> = ({
  title,
  description,
  isOpen,
  onClose,
  children
}) => {
  const onChange = (open: boolean) => {
    if (!open) {
      onClose();
    }
  };

  return ( 
    <Dialog open={isOpen} onOpenChange={onChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>
            {description}
          </DialogDescription>
        </DialogHeader>
        <div>
          {children}
        </div>
      </DialogContent>
    </Dialog>
  );
};


import { Modal } from "@/components/ui/modal";

const SetupPage = () => {
  return (
    <div className="p-4" suppressHydrationWarning={true}>
      <Modal title="Test" description="Test Desc" isOpen onClose={() => {}}>
        Children
      </Modal>
    </div>
  );
}

export default SetupPage;

He incluido los fragmentos de código relevantes, y el problema surge durante la hidratación. Cualquier idea o solución sería muy apreciada. ¡Gracias!

Intenté usar el componente Dialog de Shadcn en un proyecto de Next.js. Esperaba un renderizado fluido, pero encontré un error de hidratación:

Respuesta #1

Me encontré con el mismo error que tú. El error de hidratación suele ocurrir cuando estás tratando con ventanas emergentes modales, causado por la falta de coincidencia en el resultado de renderizado entre el lado del servidor y el lado del cliente.

Una solución alternativa es agregar una lógica de verificación para asegurar que tu Diálogo solo se renderice en el lado del cliente:

  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null;
  }

  return <YourDialogComponent/>  // only on client side

Creo que estás intentando construir un sitio web de comercio electrónico viendo Code With Antonio, ya que tu código fuente coincide exactamente con el contenido de su tutorial (y yo estoy haciendo lo mismo jaja) (perdóname si me equivoco). Y él hizo lo mismo que se describe arriba en su tutorial después, así que no obtendrás este error después de un tiempo si sigues siguiendo.

¡Salud!

Véase también:

https://nextjs.org/docs/messages/react-hydration-error

https://github.com/radix-ui/primitives/issues/1386

Cómo resolver el error de hidratación de React en Nextjs

Respuesta #2

He estado usando importaciones dinámicas con ssr establecido en falso como una solución para varios componentes de shadcn. También creo que los modales deberían ser dinámicos en general. Por ejemplo:

const Modal = dynamic(() => import("./pathToFile/Modal"), {
  ssr: false,
  loading: () => <AnyPlaceHolder />,
})

Artículos relacionados