codigo0/docs/SOLUCION_DOCKER_VENDOR_OTHER.md

🔧 Solución: vendor-other en Docker/Producción

❌ Problema

vendor-other-*.js: Uncaught TypeError: Cannot read properties of undefined (reading 'useLayoutEffect')

El build en Docker está generando vendor-other, lo cual causa errores críticos en producción.

✅ Solución Implementada

1. Configuración Estricta de Vite (vite.config.ts)

Cambios aplicados:

• ✅ Añadidas TODAS las dependencias conocidas a vendor-react o vendor-utils
• ✅ Eliminado completamente vendor-other - todo va a vendor-utils como fallback
• ✅ Error en producción si se detecta una dependencia sin clasificar

Chunks esperados:

• vendor-react-*.js - React y todas las librerías que lo usan
• vendor-utils-*.js - Utilidades que NO usan React
• vendor-markdown-*.js - Procesamiento de Markdown
• ❌ vendor-other-*.js - NO DEBE EXISTIR

2. Verificación Post-Build (scripts/verify-build.js)

Script que se ejecuta automáticamente después de npm run build:

npm run build
# Automáticamente ejecuta: node scripts/verify-build.js

Verifica:

• ✅ Que NO existe vendor-other
• ✅ Que existen los chunks esperados
• ✅ Que index.html no referencia vendor-other
• ❌ Falla el build si encuentra vendor-other

3. Dockerfile con Verificación

El Dockerfile ahora incluye verificación automática:

# CRÍTICO: Verificar que NO se generó vendor-other
RUN if ls dist/assets/vendor-other* 2>/dev/null; then \
      echo "❌ ERROR CRÍTICO: vendor-other fue generado"; \
      exit 1; \
    fi

El build de Docker FALLA si se genera vendor-other.

4. Manifest.json Corregido

• ✅ Eliminadas referencias a screenshots que no existen
• ✅ Resuelve errores 401/404 en manifest.json

🚀 Uso

Build Local con Verificación

npm run build
# Automáticamente verifica que no hay vendor-other

Build en Docker

docker build -t emerges-tes .
# El build falla automáticamente si se genera vendor-other

Verificación Manual

npm run verify:build

🔍 Troubleshooting

Si el build falla con "vendor-other fue generado"

1. Revisar logs del build:

   npm run build 2>&1 | grep -i "unclassified"
   

2. Añadir la dependencia no clasificada a vite.config.ts:

   • Si usa React → añadir a vendor-react
   • Si NO usa React → añadir a vendor-utils

3. Ejemplo:

   // Si aparece: [Vite] Unclassified dependency: /path/to/module
   // Y el módulo usa React:
   if (id.includes('nuevo-modulo-react')) {
     return 'vendor-react';
   }
   

Si el build pasa pero el error persiste en producción

1. Verificar que el build en Docker es el mismo que local:

   # Local
   npm run build
   ls -la dist/assets/ | grep vendor
   
   # En Docker
   docker build -t emerges-tes .
   docker run --rm emerges-tes ls -la dist/assets/ | grep vendor
   

2. Limpiar caché del navegador:

   • Ver docs/LIMPIAR_CACHE_NAVEGADOR.md

3. Verificar Service Worker:

   • DevTools > Application > Service Workers
   • Debe estar en versión v1.0.3 o superior
   • Hacer "Unregister" si es necesario

📋 Checklist Pre-Deploy

• Build local pasa sin errores
• npm run verify:build pasa
• No hay warnings de "Unclassified dependency" en producción
• Docker build pasa sin errores
• Verificado que dist/assets/ NO contiene vendor-other
• Service Worker actualizado a v1.0.3+
• Manifest.json no tiene referencias a archivos inexistentes

🎯 Resultado Esperado

Después de aplicar estas correcciones:

✅ Build genera solo: vendor-react, vendor-utils, vendor-markdown
✅ NO genera vendor-other
✅ Docker build falla si se genera vendor-other
✅ Verificación automática post-build
✅ Errores useLayoutEffect resueltos
✅ Manifest.json sin errores 401/404