Preview Issues

Troubleshoot and fix issues with the live preview panel in Juliet.

Written By Samir Patel

Last updated 3 months ago

Preview Issues - Troubleshoot and fix issues with the live preview panel in Juliet.

Common Symptoms

Preview shows blank/white screen "Loading..." message doesn't disappear Preview iframe won't load Development server not starting Preview worked before, now broken

Quick Fixes (Try These First)

  1. Refresh the Preview Click the refresh button (🔄) in preview panel Why it works: Clears preview cache, reloads app

  2. Wait for Server Startup Check terminal tab for: VITE v5.0.0 ready in 342 ms ➜ Local: http://localhost:5173/ Server may need 10-30 seconds to start initially.

  3. Check Terminal for Errors Look for red error messages: Syntax errors Missing dependencies Port conflicts Build failures Fix errors, preview should load.

  4. Refresh Browser Page Hard refresh: Windows/Linux: Ctrl + Shift + R Mac: Cmd + Shift + R Clears all caches, reloads everything.

Detailed Troubleshooting

Issue: Blank White Screen

Possible causes:

  1. Server hasn't started yet Check terminal:

  • Look for "ready" or "compiled" message

  • May show "starting server..."

  • Wait 30-60 seconds Solution: Be patient, server starting.

  1. JavaScript error Check browser console:

  • Right-click preview → Inspect

  • Click Console tab

  • Look for red errors

Common errors:

  • Uncaught ReferenceError: React is not defined

  • Uncaught SyntaxError: Unexpected token

  • Module not found: Can't resolve 'react-router-dom'

Solution:

  • Fix syntax error in code

  • Install missing dependency

  • Ask AI to fix error

  1. Build error Check terminal for: ✗ Build failed [error messages]

Solution:

  • Read error message

  • Fix indicated file/line

  • Save and rebuild

  • Ask AI for help

    Issue: Loading Forever Spinning loader never stops:

    Cause: Server starting but not completing Check terminal: [vite] connecting... [vite] connected. (stuck here)

    Solutions:

    1. Port already in use: Error: Port 3000 is already in use Ask AI: "Restart server on different port" Or: "Kill process on port 3000 and restart"

    2. Network issue: Check internet connection Refresh page Try again

    3. Container hibernated: Container may be waking up Wait 30-60 seconds Refresh if still stuck

    Issue: Preview Shows Error Page Red error overlay in preview:

    This is actually good - it tells you what's wrong! Read the error:

    Error: Cannot find module 'axios' Failed to compile. ./src/App.jsx Module not found: Can't resolve 'axios'

    Common error types:

    Module not found: Can't resolve 'package-name' Solution: Ask AI to install package "Install the axios package"

    Syntax error: SyntaxError: Unexpected token (15:10) Solution: Fix syntax in indicated file/line

    Import error: export 'default' (imported as 'Header') was not found Solution: Fix import statement or export

    Issue: Preview Was Working, Now Broken What changed?

    Recent code changes:

    • Undo recent edit

    • Check what AI changed last

    • Revert to previous version (if available)

    Dependency changes:

    • Package installation failed

    • Dependency conflict

    Solutions:

    1. Check terminal for what changed

    2. Review last few chat messages

    3. Ask AI: "Preview stopped working after last change, please fix"

    4. Undo recent changes

      Issue: 404 Not Found Preview shows 404 page:

      Causes:

      1. Wrong URL path Check address bar in preview Should be / or valid route Correct URL if wrong

      2. Routing not configured App doesn't have routes set up Ask AI: "Set up routing for multiple pages"

      3. Development server path issue Server running but wrong base path Usually auto-configured correctly

      Browser-Specific Issues

      Chrome/Edge If preview won't load:

      1. Check browser console (F12)

      2. Disable browser extensions temporarily

      3. Try incognito mode

      4. Clear site data: DevTools → Application → Clear storage

      Firefox Preview issues:

      1. Check console (F12)

      2. Disable enhanced tracking protection for Juliet

      3. Try private window

      4. Clear cookies for site

      Safari Common Safari issues:

      1. Disable content blockers

      2. Check Safari → Preferences → Privacy

      3. Allow cross-site tracking for Juliet (development only)

      4. Try without extensions

      Development Server Issues

      Server Won't Start Terminal shows error starting server:

      Error: EACCES permission denied Solution: Usually resolves on retry. Ask AI: "Restart development server"

      Error: EADDRINUSE port in use Solution: Port already used. Ask AI: "Use a different port for dev server"

      Error: Cannot find module Solution: Dependencies not installed. Ask AI: "Install all project dependencies"

      Server Started But Preview Blank Terminal shows "ready" but preview blank:

      Check:

      1. Port number in terminal

      2. Port selector in preview (if multiple ports)

      3. Switch to correct port

      Example: Terminal: http://localhost:5173/ Preview showing: port 3000 Solution: Switch preview to port 5173

      Server Crashes Server starts then stops: Check terminal for: [error] Server crashed Process exited with code 1

      Causes:

      • Fatal error in code

      • Out of memory

      • Dependency issue

      Solutions:

      1. Read error message

      2. Fix the error

      3. Restart server

      4. Ask AI for help with error

      Prevention Tips

      1. Monitor Terminal Watch for warnings:

      • Yellow warnings might cause issues

      • Red errors will break preview Address errors immediately

      1. Test After Changes After each major change:

      • Check preview still works

      • Look for console errors

      • Verify functionality

      1. Save Regularly Save files before testing:

      • Unsaved changes might not appear

      • Ctrl+S / Cmd+S to save

      • Check for orange dots (unsaved)

      1. Incremental Development Small changes:

      • Make small changes

      • Test each change

      • Easier to debug

      • Identify issue quickly

      1. Keep Dependencies Updated Occasional updates:

      • Ask AI: "Update project dependencies"

      • Prevents compatibility issues

      • Security improvements

      Getting Help

      Information to Provide When contacting support:

      1. What you see:

      • Blank screen

      • Error message (exact text)

      • Screenshot

      1. Terminal output:

      • Copy last 20-30 lines

      • Include error messages

      • Server startup logs

      1. Browser console:

      • Copy JavaScript errors

      • Screenshot if needed

      1. Steps taken:

      • What you tried

      • What changed before issue

      • Does refresh help?

      1. Environment:

      • Browser and version

      • Operating system

      • Internet connection type

      Self-Help Resources Before asking:

      1. Check Common Errors

      2. Review Terminal Guide

      3. Read Technical FAQs

      4. Search community forums