Lovable white screen: blank preview or published app shows nothing

Lovable Easy 10-30 minutes Last verified Jul 17, 2026

The fix A blank white screen means JavaScript crashed before React could mount, so nothing renders. Right-click the preview, choose Inspect, open the Console tab, and read the first red error: that message is the real cause. Fix that specific error (broken import, undefined environment variable, or a bad vite.config.ts), or restore the last working version from Lovable's history.

Symptoms

The preview or the published site renders a completely white page with no visible error
A hard refresh changes nothing
It appeared right after an AI edit to an app that previously worked
The browser console shows a red error like 'Module not found' or 'Element type is invalid: got undefined'
The console error mentions supabaseUrl or an undefined environment variable

Why it happens

JavaScript crashes before React mounts

The page is blank because the crash happens before anything renders. There is always a real error; it just never makes it onto the screen. It is sitting in the browser console instead.

A refactor broke the import chain

The AI renamed or moved a component and left stale imports behind. The console shows 'Module not found' or 'Element type is invalid: got undefined', and the whole app fails to load.

An environment variable is undefined at module level

If VITE_SUPABASE_URL or VITE_SUPABASE_ANON_KEY is undefined when the Supabase client initializes, the client throws during initialization and the app never mounts. Published apps do not automatically inherit preview values in externally hosted setups.

The AI broke vite.config.ts or added restrictive security headers

Lovable's own docs flag a damaged vite.config.ts and restrictive security headers as known white-screen sources.

A runtime exception in a top-level component

An exception thrown high in the component tree takes the whole render down with it, leaving nothing on screen.

How to fix it

Read the real error in the browser consoleRight-click the blank preview, choose Inspect, and open the Console tab. The first red error listed is the actual cause; everything after it is usually fallout. Copy the exact text so you can paste it to Lovable instead of saying 'it's broken'.
Fix broken imports if the console says 'Module not found' or 'got undefined'These errors mean a refactor renamed or moved a component and left stale imports pointing at the old location. Paste the exact error into Lovable and ask it to find every file importing the renamed or moved component and fix the import paths. Keep the prompt scoped to imports only.
Check environment variables if the error mentions supabaseUrl or undefinedWhen VITE_SUPABASE_URL or VITE_SUPABASE_ANON_KEY is undefined at module level, the Supabase client throws during initialization and the app dies before mounting. Verify both values are set for the environment that is blank. Published apps do not inherit preview values automatically in externally hosted setups.
Ask Lovable to check vite.config.ts and security headersLovable's docs list a broken vite.config.ts and restrictive security headers as known white-screen sources. In chat, ask the AI to 'review the vite.config.ts file or remove security headers' and let it correct the config.
Use 'Try to Fix' once, then revertClick 'Try to Fix' a single time. If the screen is still blank, restore the last working version from history and re-apply your change in smaller steps instead of stacking more fixes on a broken state.
Check Cloud logs on Lovable Cloud projectsSome build and runtime errors never reach the browser. Open Cloud > Logs and look for failures around the time the screen went blank.

How to prevent it

Read the console before you prompt; the exact red error produces targeted fixes, 'it's broken' produces guesses
Make refactors in small, single-purpose prompts so a broken import chain is one prompt deep, not five
After renaming or moving components, ask Lovable to verify every file that imports them
Confirm environment variables exist in every environment you deploy to, not just the preview
Connect GitHub so you can diff exactly what an edit changed when the screen goes white

Tools that actually fix this

Recommended because they address the failure mode above, not because of the payout. Some are affiliate links; see how we choose.

SentryFree Developer tier, no card

The default error tracker for JS and Python. It catches the unhandled exceptions and swallowed promise rejections AI-generated code ships with, and gives you the stack trace instead of a mystery.

Try Sentry →

Better Stackfree tier

Uptime, heartbeat, and log monitoring built for indie devs. Heartbeats catch the dead background job your app never noticed, and log alerts surface the errors it never handled. Real free tier.

Try Better Stack →

Frequently asked questions

Why is my Lovable preview showing a blank white screen?

A blank white screen in the Lovable preview means a JavaScript error was thrown before React could mount, so nothing ever renders. Common triggers are a broken import chain after a refactor, an undefined environment variable like VITE_SUPABASE_URL crashing the Supabase client, or a damaged vite.config.ts. The real error message is waiting in the browser console.

How do I find the actual error behind a Lovable white screen?

Right-click the blank preview, choose Inspect, and open the Console tab. The first red error listed is the actual cause of the white screen; later errors are usually side effects of it. Paste that exact text into Lovable chat instead of describing the problem as broken.

Why is my published Lovable app blank when the preview works fine?

The most common reason a published Lovable app is blank while the preview works is an environment variable that exists in preview but not in production. If VITE_SUPABASE_URL or VITE_SUPABASE_ANON_KEY is undefined at load time, the Supabase client throws during initialization and the app never mounts. Externally hosted deployments do not inherit preview values automatically.

Should I keep clicking 'Try to Fix' on a Lovable white screen?

Click 'Try to Fix' once. A white screen often has a root cause the button cannot see, such as a config or environment issue, and repeated attempts push the code further from a working state. If one click does not fix it, restore the last working version from history and re-apply the change in smaller steps.

Sources

The Vibe Oops briefing

One email when something ships to production that should not have. New incidents, new error guides, no filler.