Fix: Deshabilitar useToast en SSR para evitar crash
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m6s

El problema era que useToast() no funciona en Server-Side Rendering.
Cuando los componentes se renderizaban en el servidor, crasheaba con error 500.

Cambios:
- Hacer que toast sea opcional: process.client ? useToast() : null
- Cambiar todos toast.add() a toast?.add()
- Ahora el composable funciona tanto en servidor como en cliente
This commit is contained in:
2025-11-21 23:36:01 -06:00
parent da5032ad54
commit 2ca062b9e0

View File

@@ -31,7 +31,8 @@ export interface TrazabilidadRow {
} }
export const useLotes = () => { export const useLotes = () => {
const toast = useToast() // useToast solo funciona en el cliente, no en SSR
const toast = process.client ? useToast() : null
// ===================================================== // =====================================================
// FUNCIONES PARA LOTES // FUNCIONES PARA LOTES
@@ -67,7 +68,7 @@ export const useLotes = () => {
return data.value?.data || [] return data.value?.data || []
} catch (err: any) { } catch (err: any) {
console.error('Error fetching lotes:', err) console.error('Error fetching lotes:', err)
toast.add({ toast?.add({
title: 'Error', title: 'Error',
description: err.message || 'Error obteniendo lotes', description: err.message || 'Error obteniendo lotes',
color: 'red', color: 'red',
@@ -93,7 +94,7 @@ export const useLotes = () => {
return data.value?.data || null return data.value?.data || null
} catch (err: any) { } catch (err: any) {
console.error('Error fetching lote:', err) console.error('Error fetching lote:', err)
toast.add({ toast?.add({
title: 'Error', title: 'Error',
description: err.message || 'Error obteniendo lote', description: err.message || 'Error obteniendo lote',
color: 'red', color: 'red',
@@ -125,7 +126,7 @@ export const useLotes = () => {
throw new Error(error.value.message || 'Error creando lote') throw new Error(error.value.message || 'Error creando lote')
} }
toast.add({ toast?.add({
title: 'Éxito', title: 'Éxito',
description: 'Lote creado correctamente', description: 'Lote creado correctamente',
color: 'green', color: 'green',
@@ -134,7 +135,7 @@ export const useLotes = () => {
return data.value?.data || null return data.value?.data || null
} catch (err: any) { } catch (err: any) {
console.error('Error creating lote:', err) console.error('Error creating lote:', err)
toast.add({ toast?.add({
title: 'Error', title: 'Error',
description: err.message || 'Error creando lote', description: err.message || 'Error creando lote',
color: 'red', color: 'red',
@@ -169,7 +170,7 @@ export const useLotes = () => {
throw new Error(error.value.message || 'Error actualizando lote') throw new Error(error.value.message || 'Error actualizando lote')
} }
toast.add({ toast?.add({
title: 'Éxito', title: 'Éxito',
description: 'Lote actualizado correctamente', description: 'Lote actualizado correctamente',
color: 'green', color: 'green',
@@ -178,7 +179,7 @@ export const useLotes = () => {
return data.value?.data || null return data.value?.data || null
} catch (err: any) { } catch (err: any) {
console.error('Error updating lote:', err) console.error('Error updating lote:', err)
toast.add({ toast?.add({
title: 'Error', title: 'Error',
description: err.message || 'Error actualizando lote', description: err.message || 'Error actualizando lote',
color: 'red', color: 'red',
@@ -200,7 +201,7 @@ export const useLotes = () => {
throw new Error(error.value.message || 'Error eliminando lote') throw new Error(error.value.message || 'Error eliminando lote')
} }
toast.add({ toast?.add({
title: 'Éxito', title: 'Éxito',
description: 'Lote eliminado correctamente', description: 'Lote eliminado correctamente',
color: 'green', color: 'green',
@@ -209,7 +210,7 @@ export const useLotes = () => {
return true return true
} catch (err: any) { } catch (err: any) {
console.error('Error deleting lote:', err) console.error('Error deleting lote:', err)
toast.add({ toast?.add({
title: 'Error', title: 'Error',
description: err.message || 'Error eliminando lote', description: err.message || 'Error eliminando lote',
color: 'red', color: 'red',
@@ -242,7 +243,7 @@ export const useLotes = () => {
return data.value?.data || null return data.value?.data || null
} catch (err: any) { } catch (err: any) {
console.error('Error fetching trazabilidad:', err) console.error('Error fetching trazabilidad:', err)
toast.add({ toast?.add({
title: 'Error', title: 'Error',
description: err.message || 'Error obteniendo trazabilidad', description: err.message || 'Error obteniendo trazabilidad',
color: 'red', color: 'red',
@@ -285,7 +286,7 @@ export const useLotes = () => {
return data.value?.data || [] return data.value?.data || []
} catch (err: any) { } catch (err: any) {
console.error('Error fetching operaciones:', err) console.error('Error fetching operaciones:', err)
toast.add({ toast?.add({
title: 'Error', title: 'Error',
description: err.message || 'Error obteniendo operaciones', description: err.message || 'Error obteniendo operaciones',
color: 'red', color: 'red',
@@ -326,7 +327,7 @@ export const useLotes = () => {
throw new Error(error.value.message || 'Error creando operación') throw new Error(error.value.message || 'Error creando operación')
} }
toast.add({ toast?.add({
title: 'Éxito', title: 'Éxito',
description: 'Operación creada correctamente', description: 'Operación creada correctamente',
color: 'green', color: 'green',
@@ -335,7 +336,7 @@ export const useLotes = () => {
return data.value?.data || null return data.value?.data || null
} catch (err: any) { } catch (err: any) {
console.error('Error creating operacion:', err) console.error('Error creating operacion:', err)
toast.add({ toast?.add({
title: 'Error', title: 'Error',
description: err.message || 'Error creando operación', description: err.message || 'Error creando operación',
color: 'red', color: 'red',