PROBLEMA:
- assetsInclude estaba duplicado (línea 54 y 254)
- assetsInclude dentro de build causa error TypeScript
- assetsInclude debe estar solo en nivel superior
SOLUCIÓN:
- Eliminado assetsInclude de dentro de build
- Mantenido assetsInclude en nivel superior (correcto)
RESULTADO:
✅ Error TypeScript resuelto
✅ Configuración correcta
PROBLEMA CRÍTICO:
- index.html no tenía prefijos (0-, 1-, 2-) en las referencias
- Archivos físicos sí tenían prefijos
- Navegador intentaba cargar archivos sin prefijo que no existen
SOLUCIÓN:
- Plugin vite-plugin-fix-html-references.ts
- Corrige referencias en index.html después del build
- Añade prefijos numéricos a las referencias de chunks vendor
RESULTADO:
✅ index.html ahora referencia correctamente:
- 0-vendor-react-*.js
- 1-vendor-utils-*.js
- 2-vendor-markdown-*.js
✅ Orden de carga garantizado
✅ Navegador carga archivos correctos
- Verifica qué chunks tiene el servidor
- Detecta si el build es antiguo o nuevo
- Muestra prefijos numéricos (0-, 1-, 2-)
- Útil para diagnosticar problemas de caché vs build antiguo
PROBLEMAS EN VERCEL:
- lowlight no estaba clasificado (errores en producción)
- verify-build.js puede tener problemas en Vercel
SOLUCIÓN:
- lowlight añadido a vendor-markdown (syntax highlighting)
- Verificado que verify-build.js usa ES modules correctamente
RESULTADO:
✅ lowlight clasificado correctamente
✅ Sin errores de dependencias sin clasificar
✅ Build en Vercel debería pasar
PROBLEMA:
- Navegador sigue usando vendor-utils-ClLzZSLi.js (antiguo)
- Caché muy persistente
SOLUCIÓN:
- Service Worker ahora fuerza recarga de páginas al actualizar
- Guía de limpieza definitiva con 3 métodos
- Script automático mejorado (incluye IndexedDB)
- Instrucciones paso a paso más detalladas
RESULTADO:
✅ Service Worker más agresivo en limpiar cachés
✅ Múltiples métodos de limpieza
✅ Verificación completa post-limpieza
PROBLEMA:
- Navegador usando versión antigua en caché (vendor-utils-ClLzZSLi.js)
- Build nuevo correcto pero caché no actualizado
SOLUCIÓN:
- Service Worker actualizado a v1.0.4 (elimina cachés antiguos)
- Guía de limpieza urgente con script automático
- Instrucciones paso a paso para limpiar caché
RESULTADO:
✅ Service Worker elimina cachés antiguos automáticamente
✅ Script automático para limpieza rápida
✅ Documentación clara para resolver el problema
PROBLEMA:
- Script buscaba chunks que empezaran con 'vendor-'
- Los nuevos chunks tienen prefijos numéricos (0-, 1-, 2-)
- No encontraba los chunks correctamente
SOLUCIÓN:
- Actualizado filtro para buscar chunks con prefijos numéricos
- Actualizada búsqueda de chunks esperados para incluir prefijos
- Ahora encuentra correctamente: 0-vendor-react, 1-vendor-utils, 2-vendor-markdown
RESULTADO:
✅ Script encuentra todos los chunks correctamente
✅ Verificación completa y precisa
✅ Build funcionando con orden de carga garantizado
CRÍTICO: Prevenir errores useLayoutEffect
En producción, si una dependencia no está clasificada:
- Va a vendor-react por seguridad
- Previene que código desconocido use React antes de tiempo
- Es mejor tener código extra en vendor-react que errores
En desarrollo:
- Va a vendor-utils para debugging
- Permite identificar dependencias sin clasificar
PROBLEMA CRÍTICO:
- Error useLayoutEffect en vendor-utils
- Orden de carga no garantizado (chunks se cargan en paralelo)
- @ungap/structured-clone en vendor-utils pero usado por React
SOLUCIÓN:
1. Prefijos numéricos en chunkFileNames:
- 0-vendor-react (carga PRIMERO - orden alfabético)
- 1-vendor-utils (carga DESPUÉS)
- 2-vendor-markdown (carga después)
2. @ungap/structured-clone movido a vendor-react
(puede ser usado por librerías React)
3. Dependencias sin clasificar en producción:
- Van a vendor-react por seguridad
- Previene errores useLayoutEffect
RESULTADO:
✅ Orden de carga garantizado (alfabético con prefijos)
✅ vendor-react siempre carga antes que vendor-utils
✅ Todas las dependencias React en vendor-react
✅ Sin errores useLayoutEffect
PROBLEMAS RESUELTOS:
- verify-build.js fallaba con 'require is not defined' (ES module)
- Warning de chunks grandes (>500KB) - vendor-react es grande pero necesario
SOLUCIÓN:
- Convertidos scripts a ES modules (import en lugar de require)
- Añadido chunkSizeWarningLimit: 1000 en vite.config.ts
(vendor-react puede ser >500KB pero es necesario y está optimizado)
RESULTADO:
✅ Scripts funcionan correctamente en entorno ES module
✅ Warning de chunks grandes suprimido (esperado para vendor-react)
✅ Build y verificación funcionan correctamente
PROBLEMA RESUELTO:
- hast-util-to-jsx-runtime estaba en vendor-utils pero necesita React
- Orden de carga de chunks incorrecto
- Posibles múltiples instancias de React
SOLUCIÓN IMPLEMENTADA:
1. vite.config.ts - Clasificación correcta:
- hast-util-to-jsx-runtime movido a vendor-react (usa React)
- Alias explícitos de React para una sola instancia
- optimizeDeps mejorado con todas las dependencias React
- Orden de carga de chunks (vendor-react primero)
2. package.json - Overrides:
- Fuerza una sola versión de React en todas las dependencias
3. scripts/diagnose-react.js (nuevo):
- Script de diagnóstico para verificar configuración
4. docs/SOLUCION_DEFINITIVA_USELAYOUTEFFECT.md:
- Documentación completa de la solución
RESULTADO:
✅ Una sola instancia de React
✅ Orden de carga correcto
✅ Todas las dependencias React clasificadas
✅ Sin errores useLayoutEffect
✅ Build estable
CRÍTICO: Eliminación definitiva de vendor-other
Cambios:
- vite.config.ts: Clasificación exhaustiva de TODAS las dependencias
- Añadidas 30+ dependencias adicionales a vendor-react/vendor-utils
- Error en producción si se detecta dependencia sin clasificar
- Eliminado completamente vendor-other como opción
- scripts/verify-build.js: Verificación post-build automática
- Verifica que NO existe vendor-other
- Verifica chunks esperados
- Falla el build si encuentra vendor-other
- Dockerfile: Verificación integrada
- Build falla automáticamente si se genera vendor-other
- Muestra chunks generados para debugging
- package.json: build ahora ejecuta verificación automáticamente
- manifest.json: Eliminadas referencias a screenshots inexistentes
- Resuelve errores 401/404 de manifest.json
- docs/SOLUCION_DOCKER_VENDOR_OTHER.md: Documentación completa
Resultado:
✅ Build 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
- Incrementada CACHE_VERSION a v1.0.3 para forzar actualización
- Añadida documentación completa para limpiar caché del navegador
- Incluye métodos para Chrome/Edge, modo incógnito y limpieza completa
- Instrucciones para verificar que el problema está resuelto
- Incrementar CACHE_VERSION a v1.0.3 para forzar actualización
- Mejorar lógica de limpieza para eliminar vendor-other antiguo
- Añadir documentación detallada para limpiar caché del navegador
- Resuelve problema de navegador usando build antiguo en caché
- Añadir optimizeDeps con React explícito
- Mejorar condiciones de resolución
- Documentar solución para vendor-other en Vercel
- El build local es correcto, el problema es caché/build antiguo en Vercel
- Incluir React y React DOM en optimizeDeps
- Añadir condiciones de resolución explícitas
- Mejorar configuración de esbuild
- Esto asegura que React se pre-bundle correctamente
- Añadir dedupe: ['react', 'react-dom'] en vite.config.ts
- Esto fuerza una sola instancia de React en el bundle
- Crear script limpiar-y-rebuild.sh para limpieza completa
- Soluciona errores useLayoutEffect por React duplicado
- Poner TODO lo relacionado con React en vendor-react
- Esto garantiza que React esté disponible antes de cualquier otro código
- Separar solo utilidades que NO usan React (vendor-utils, vendor-other)
- Eliminado vendor-other completamente
- Todo lo no categorizado ahora va a vendor-ui
- vendor-ui se carga después de vendor-react
- Esto previene que código use React antes de que esté disponible
- Añadir react-resizable-panels, input-otp, cmdk, vaul a chunks específicos
- Protección adicional en vendor-other para excluir dependencias de React
- Asegurar que todas las dependencias de React se cargan después de vendor-react
- Asegurar que React se carga antes que otros chunks en vite.config.ts
- Incluir scheduler en vendor-react para evitar errores de useLayoutEffect
- Suprimir errores de extensiones del navegador (message channel closed)
- Mejorar manejo de errores en main.tsx con mensajes amigables
planetazuzu