codigo0/docs/SOLUCION_ERROR_USELAYOUTEFFECT.md

🔧 Solución Completa: Error useLayoutEffect

❌ Error

Uncaught TypeError: Cannot read properties of undefined (reading 'useLayoutEffect')
at vendor-other-RJb9Jc5z.js:18:11569

🔍 Diagnóstico

Este error indica que:

1. El navegador está usando una versión ANTIGUA en caché
2. El archivo vendor-other-RJb9Jc5z.js es de un build anterior
3. El nuevo build NO genera vendor-other (o genera uno diferente)
4. El Service Worker o caché del navegador está sirviendo la versión antigua

✅ Soluciones Aplicadas

1. Code Splitting Mejorado

• ✅ Todo lo relacionado con React está en vendor-react
• ✅ Eliminado vendor-other (todo va a vendor-utils)
• ✅ Añadido dedupe: ['react', 'react-dom'] en Vite

2. Service Worker Actualizado

• ✅ Versión de cache actualizada a v1.0.2
• ✅ Esto fuerza al navegador a descargar nuevos archivos

🔧 Solución Inmediata (OBLIGATORIO)

Paso 1: Desactivar Service Worker

Chrome/Edge:

1. Abre DevTools (F12)
2. Ve a Application > Service Workers
3. Para cada Service Worker activo:
   • Click en Unregister
   • Marca "Bypass for network" si está disponible
4. Cierra DevTools

Firefox:

1. Abre DevTools (F12)
2. Ve a Application > Almacenamiento > Service Workers
3. Click en Desregistrar
4. Cierra DevTools

Paso 2: Limpiar Caché del Navegador

Chrome/Edge:

• Ctrl+Shift+Delete (Windows/Linux)
• Cmd+Shift+Delete (Mac)
• Selecciona:
  • ✅ "Cached images and files"
  • ✅ "Hosted app data" (si está disponible)
• Rango: "Todo el tiempo"
• Click en "Borrar datos"

Firefox:

• Ctrl+Shift+Delete (Windows/Linux)
• Cmd+Shift+Delete (Mac)
• Selecciona:
  • ✅ "Caché"
  • ✅ "Datos de sitios web"
• Rango: "Todo"
• Click en "Limpiar ahora"

Paso 3: Limpiar Cache Storage

Chrome/Edge:

1. DevTools (F12) > Application > Cache Storage
2. Click derecho en cada cache > Delete
3. O selecciona todos y click en el icono de papelera

Firefox:

1. DevTools (F12) > Application > Almacenamiento > Caché
2. Click en "Limpiar todo"

Paso 4: Recargar

1. Cierra TODAS las pestañas de la aplicación
2. Cierra el navegador completamente
3. Abre el navegador de nuevo
4. Navega a la aplicación
5. Recarga con recarga forzada:
   • Ctrl+Shift+R (Windows/Linux)
   • Cmd+Shift+R (Mac)

Paso 5: Verificar (Opcional - Modo Incógnito)

1. Abre una ventana incógnita/privada
2. Navega a la aplicación
3. Si funciona en incógnito, confirma que es problema de caché

🔧 En el Servidor

Asegúrate de que el build se hizo con el nuevo código:

cd /var/www/emerges-tes
git pull origin main

# Limpiar completamente
rm -rf node_modules package-lock.json

# Reinstalar
npm install

# Rebuild
npm run build

# Verificar que NO existe vendor-other-RJb9Jc5z.js
ls -la dist/assets/ | grep vendor-other
# Deberías ver vendor-other-CP1puROj.js (nuevo) o nada

🧪 Verificación

Después de limpiar caché, verifica en DevTools:

1. Network tab:

   • Recarga la página
   • Busca vendor-other en las peticiones
   • Verifica que el hash sea diferente (no RJb9Jc5z)

2. Console:

   • No debería aparecer el error de useLayoutEffect
   • Si aparece, el caché no se limpió correctamente

💡 Si el Problema Persiste

1. Verificar que el build en servidor es correcto:

   ssh root@207.180.226.141
   cd /var/www/emerges-tes
   ls -la dist/assets/ | grep vendor
   

2. Forzar actualización del Service Worker:

   • Incrementar CACHE_VERSION en public/sw.js
   • Hacer nuevo build y deploy

3. Desactivar Service Worker temporalmente:

   • Comentar el registro en src/main.tsx
   • Hacer build y deploy
   • Probar sin Service Worker

📋 Checklist Final

• Service Worker desactivado
• Caché del navegador limpiado
• Cache Storage limpiado
• Navegador cerrado y reabierto
• Recarga forzada realizada
• Build en servidor actualizado
• Verificado que no hay vendor-other-RJb9Jc5z.js en Network tab

🎯 Causa Raíz

El problema es caché del navegador/Service Worker, no el código. El código está correcto, pero el navegador está usando una versión antigua que tenía React mal resuelto.

La solución es limpiar completamente el caché siguiendo los pasos arriba.