From 12da05bfe7c462cb888fd1ed16bb6a59a70267cd Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 21 Nov 2025 23:46:36 -0600
Subject: [PATCH] Fix: Envolver componentes en ClientOnly para evitar error SSR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Los componentes LotesTable y OperacionesTable usan UTable de Nuxt UI,
que internamente usa @tanstack/table-core. Esta librería no puede
renderizarse en el servidor (SSR), causando error 500.

Solución: Envolver los componentes en <ClientOnly> para que solo se
rendericen en el navegador.
---
 nuxt4/app/app.vue | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index fa4d9a5..93eef57 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -85,12 +85,14 @@
             <template #lotes>
               <div class="py-4">
                 <h3>Contenido del Tab Lotes</h3>
-                <LotesTable
-                  @create="showCreateLoteModal = true"
-                  @view="handleViewLote"
-                  @edit="handleEditLote"
-                  @trazabilidad="handleViewTrazabilidad"
-                />
+                <ClientOnly>
+                  <LotesTable
+                    @create="showCreateLoteModal = true"
+                    @view="handleViewLote"
+                    @edit="handleEditLote"
+                    @trazabilidad="handleViewTrazabilidad"
+                  />
+                </ClientOnly>
               </div>
             </template>
 
@@ -98,10 +100,12 @@
             <template #operaciones>
               <div class="py-4">
                 <h3>Contenido del Tab Operaciones</h3>
-                <OperacionesTable
-                  @create="showCreateOperacionModal = true"
-                  @view="handleViewOperacion"
-                />
+                <ClientOnly>
+                  <OperacionesTable
+                    @create="showCreateOperacionModal = true"
+                    @view="handleViewOperacion"
+                  />
+                </ClientOnly>
               </div>
             </template>
           </UTabs>