Solución: Unexpected token '<' — la página devuelve HTML en lugar de JS
El navegador recibe HTML donde esperaba JavaScript. Error típico de rutas mal configuradas en Vite, webpack o React Router. Cómo identificarlo y solucionarlo.
¿Por qué ocurre?
Cuando el navegador pide un archivo .js pero el servidor responde con una página HTML (normalmente el index.html), al intentar interpretar el '<' del DOCTYPE como JavaScript lanza este error. Ocurre con frecuencia en SPAs (React, Vue) cuando el servidor no está configurado para manejar rutas del lado del cliente, o cuando la ruta del script en index.html es incorrecta.
Solución paso a paso
Paso 1 — Comprueba la pestaña Network en DevTools:
Abre DevTools → Network → recarga → busca el archivo .js que falla → haz clic en él → revisa la pestaña Preview. Si ves HTML (), el servidor devuelve la página en lugar del script.
Caso 1 — base mal configurada en Vite:
// vite.config.js
export default {
// ❌ Si tu app está en una subcarpeta pero base no lo refleja
base: '/', // ← cambia si el deploy no está en la raíz // ✅ Si el deploy está en /mi-app/
base: '/mi-app/',
}
Caso 2 — React Router en producción sin redirecciones:
# netlify.toml — redirige todo a index.html para que React Router funcione
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
# nginx.conf
location / {
try_files $uri $uri/ /index.html;
}
# .htaccess (Apache)
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Caso 3 — Ruta del script en index.html incorrecta:
Caso 4 — Servidor Express sin configurar archivos estáticos:
// ❌ Express no sabe dónde están los archivos del build
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});// ✅ Primero sirve estáticos, luego el fallback
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
Cómo evitarlo en el futuro
Configura siempre `base` en vite.config.js si el deploy no va en la raíz del dominio. En Netlify, añade el redirects rule desde el primer deploy. Verifica las rutas con las DevTools antes de salir a producción.
¿Quieres que una IA te ayude? Genera el prompt perfecto para tu error:
Generador de Prompts