146 lines
3.9 KiB
Markdown
146 lines
3.9 KiB
Markdown
|
|
# 🔧 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`:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
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:
|
||
|
|
|
||
|
|
```dockerfile
|
||
|
|
# 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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run build
|
||
|
|
# Automáticamente verifica que no hay vendor-other
|
||
|
|
```
|
||
|
|
|
||
|
|
### Build en Docker
|
||
|
|
|
||
|
|
```bash
|
||
|
|
docker build -t emerges-tes .
|
||
|
|
# El build falla automáticamente si se genera vendor-other
|
||
|
|
```
|
||
|
|
|
||
|
|
### Verificación Manual
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run verify:build
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🔍 Troubleshooting
|
||
|
|
|
||
|
|
### Si el build falla con "vendor-other fue generado"
|
||
|
|
|
||
|
|
1. **Revisar logs del build:**
|
||
|
|
```bash
|
||
|
|
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:**
|
||
|
|
```typescript
|
||
|
|
// 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:**
|
||
|
|
```bash
|
||
|
|
# 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
|
||
|
|
|