0

Tengo una página hecha con React 18 en Vite (también estoy usando TypeScript y TailwindCSS), y al querer mostrar un mensaje con SweetAlert2, no se muestran correctamente los estilos, ya que, al desplegar la alerta, esta no se muestra correctamente, sino que solo se ve como un texto al final de la página.

El código para desplegar la alerta la tengo en un archivo llamado "toast.ts".

import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'

const MySwal = withReactContent(Swal)

export function handleError(message:string){
    return MySwal.fire('Error', message, 'error')
}

export function showSuccess(message:string){
    return MySwal.fire('Listo', message, 'success')
}

Y en mi componente, que es una página de Login, tengo el componente Login, en el cual tengo la siguiente función que se ejecuta al presionar el botón de "Iniciar Sesión":

const handleLogin = async () => {
    try{
        setLoading(true)
        const cleanEmail = email.toLowerCase().trim()

        if(cleanEmail === '' || password === ''){
            throw new Error('Ingrese sus datos para poder iniciar sesión')
        }

        await login(email, password)
    }
    catch(err){
        if(err instanceof Error){
            handleError(err.message)
        }        
    }
    finally{
        setLoading(false)
    }
}

Estoy consciente de que "validar" en el front-end no es seguro, pero en este momento solo estoy haciendo pruebas; mi problema es que, al ocurrir un error en la función, la alerta se muestra, pero no como debería, sino que se ve al final de la página como un texto:

introducir la descripción de la imagen aquí

¿Saben que tengo qué hacer para que se despliegue la alerta con los estilos correctos?

3 respuestas 3

0

Tenia el mismo problema, estaba tratando de mostrar alertas con sweetalert2 pero por alguna razón salían al pie de pagina, estaba usando vite, react y sweetalert2, lo solucione importando de la siguiente forma:

import Swal from 'sweetalert2/dist/sweetalert2.all.js'
1
  • Muchas gracias, me funcionó y ya despliega las alertas correctamente. Commented el 24 jun. 2022 a las 23:21
0

Cuando uso sweeralert2 no necesito usar "withReactContent". Intenta:

import Swal from 'sweetalert2'
Swal.fire('Error', message, 'error')

En la documentación hay muchísimos ejemplos

0

Tienes que importar los estilos mediante:

 import 'sweetalert2/src/sweetalert2.scss

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.