El mensaje Your preview will appear here significa que el proceso de vista previa no ha producido una aplicación funcional aún. Es un síntoma, no la causa raíz. La pista útil suele ser la primera línea roja en el terminal o consola del navegador.

Respuesta en 30 segundos

  1. Verifica si la plataforma tiene un incidente activo.
  2. Abre el terminal del proyecto y copia el primer error de compilación o tiempo de ejecución.
  3. Ejecuta npm run build para revelar errores que la vista previa pueda ocultar.
  4. Si la aplicación usa una base de datos o API, confirma que los secretos requeridos existan en este proyecto.
  5. Proporciona al agente el error exacto y pídele que cambie solo el archivo o ajuste mencionado en ese error.

No presiones un botón de solución general sin leer el resultado nuevo. Si un intento crea un error diferente, restaura la última versión funcional antes de intentar otro cambio.

Rama 1 — ¿La plataforma está inaccesible?

Abre primero la página de estado oficial. Si varios proyectos dejaron de cargar al mismo tiempo, o la página de estado reporta un incidente de vista previa o compilación, espera a que el proveedor recupere el servicio. Cambiar tu código durante un incidente agrega ruido y puede crear un segundo problema.

Si solo un proyecto falla, continúa con las verificaciones del proyecto a continuación.

Rama 2 — Encuentra el primer error del terminal

En Bolt, cambia a la vista de Código y abre la pestaña Terminal. En cualquier proyecto basado en Vite, ejecuta:

bash

npm run build

Lee hacia arriba desde la última línea failed o exit code 1 y copia el primer error específico. Las ramas comunes son:

  • Module not found o un error de importación: un archivo, paquete o nombre de archivo no coincide en caso.
  • Un error de sintaxis o tipo: el último cambio de código no compiló.
  • Una variable de entorno faltante: la aplicación inicia antes de que exista una configuración requerida de base de datos o API.
  • Un error de dependencia: el paquete no está en el proyecto o sus versiones son incompatibles.

Pega esa línea exacta en el chat del agente con la instrucción: «Explica primero la causa raíz. No edites aún». Después de que la explicación coincida con el registro, pide un cambio limitado.

Rama 3 — La compilación pasa pero la vista previa sigue vacía

Abre las herramientas de desarrollador del navegador y selecciona Consola, luego recarga la vista previa. Copia el primer error de tiempo de ejecución rojo. Una compilación de producción limpia aún puede fallar en el navegador porque falta un secreto, una solicitud de API está bloqueada o el código del cliente lee un valor indefinido.

Si el proyecto usa Supabase o otra API, inspecciona los Secretos actuales del proyecto o las configuraciones del entorno. Confirma exactamente los nombres de las variables, incluyendo cualquier prefijo público requerido por el marco. Nunca pegues el valor del secreto en un post de soporte o en una solicitud a un modelo de IA.

Luego, prueba la vista previa en un navegador Chromium con extensiones y VPN temporalmente desactivados. Si funciona allí, probablemente el código del proyecto no sea la causa; reactiva una extensión o capa de red a la vez.

Rama 4 — Un cambio de configuración causó el problema

Si la falla comenzó inmediatamente después de que el agente editara vite.config.ts, rutas, un proxy o encabezados de seguridad, compara ese cambio con la última versión funcional. Restaura el último punto de control funcional cuando no puedas explicar el cambio. Luego reaplica solo la configuración más pequeña necesaria.

Evita reiniciar todo el proyecto. Una devolución de versión es más segura porque te da una base conocida y hace visible el cambio que provocó el error.

Verifica la solución

Una imagen de vista previa sola no es suficiente. Confirma los cuatro controles:

  1. npm run build termina sin error.
  2. La consola del navegador no tiene nuevas excepciones rojas después de recargar.
  3. La primera pantalla se renderiza y su botón principal o formulario responde.
  4. Un segundo navegador o ventana privada carga la misma vista previa.

Si la vista previa funciona solo en un navegador, sigue investigando extensiones, caché, VPN o políticas de red en lugar de cambiar el código de la aplicación.

Si aún no funciona

Restaura la última versión funcional y reproduce la falla con un cambio pequeño. Guarda el error del terminal, el error de la consola, el nombre de la herramienta, el navegador y el paso que lo provocó. Envía esos detalles al canal oficial de soporte de la plataforma. No incluyas claves API, tokens de acceso, secretos de proyecto o datos personales.

Resumen para principiantes

No pidas a la IA que «arregle todo». Abre el terminal, copia el primer error rojo y pide qué causó esa línea exacta. Ejecuta npm run build, verifica los secretos requeridos y haz un cambio. Si el nuevo intento rompe más cosas, retrocede a la última versión que funcionó.