Short answer: a blank page almost always means your app crashed before it could draw anything. The browser shows nothing, but it does log the reason. Open the console on the live site, read the first red line, and fix that. The most common cause is that your Supabase keys never made it into the published build.
Don't ask Lovable to "fix the white screen" over and over without that red line. It can't see your live site's console, so it guesses.
Step 1: find the real error (2 minutes)
- Open your live site, not the editor preview. Use a private window.
- Press F12 (on a Mac, Cmd + Option + I) and click Console.
- Reload the page.
- Find the first red line. Later errors are usually knock-on effects.
- Copy it exactly, including any file name.
Then click the Network tab, reload again and look for anything red.
No red line at all? Right-click the page, choose View page source, and check that it isn't an old or empty page. Then go to Cause 5.
Step 2: match the error to the cause
| First red line says | Most likely cause | Go to |
|---|---|---|
supabaseUrl is required or supabaseKey is required | Supabase keys missing from the live build | Cause 1 |
Invalid URL, or a key is undefined | Wrong name for the key (no VITE_ at the start) | Cause 2 |
Cannot read properties of undefined (reading 'map') or similar | The page tried to use data that wasn't there | Cause 3 |
Red requests to supabase.co with 401, 403 or 42501 | The database said no (row-level security) | Cause 4 |
Red 404 on files under /assets/ | The live site is an old or broken build | Cause 5 |
| Nothing red, page still blank | Old snapshot, failed publish, or a Lovable outage | Cause 5 and 6 |
The causes and how to fix them
Cause 1: your Supabase keys aren't in the live build
Your app connects to Supabase using a web address and a public key. A Lovable app is built with a tool called Vite. Vite copies these values into the site when it is built, not when someone opens it. If the values were missing at build time, the live site starts with nothing, and the Supabase library stops the app with supabaseUrl is required.
On the lovable.app address or your Lovable custom domain
- Check Supabase is still connected to the project (an expired connection can also make publishing fail).
- Open Publish, then click Publish changes. Publishing deploys a fresh snapshot. A small dot on the Publish button means you have changes that aren't live yet.
If you moved the app to Vercel, Netlify or another host
- Add the same names your code uses (often
VITE_SUPABASE_URLandVITE_SUPABASE_PUBLISHABLE_KEY) to the host's settings for Production. - Then rebuild and redeploy. Adding the value without a rebuild changes nothing.
- Never put a secret key (service role or
sb_secret_...) on aVITE_name. Anything withVITE_is visible to every visitor.
Cause 2: the key has the wrong name
Vite only passes on values whose names start with VITE_. These won't work in a Lovable app:
SUPABASE_URL(no prefix; that one is for server code like Edge Functions)NEXT_PUBLIC_SUPABASE_URL(that's for a different tool, Next.js)
Search your code for import.meta.env and list every name. Each one the browser needs must start with VITE_, and the host must use exactly the same spelling.
Cause 3: the page used data before it arrived
Cannot read properties of undefined (reading 'map') means the code tried to loop over a list that didn't exist yet, or a column the database doesn't have. One error like this can blank the whole page, because React stops drawing when part of the page crashes.
Fix: ask Lovable to show a loading state until the data arrives, treat an empty result as an empty list, and add an error boundary so one broken section can't blank the whole app. Give it the exact red line.
Cause 4: the database refused the request
If the Network tab shows requests to your-project.supabase.co failing with 401, 403 or code 42501, your app is fine and Supabase said no. Usually a row-level security (RLS) policy lets nobody read the table. Some apps then crash on the empty result (see Cause 3).
Don't turn RLS off to make the page appear. That opens your data to anyone. Add the right policy instead. See New row violates row-level security policy.
Cause 5: the live site is an old or failed build
- The publish didn't finish. The Publish dialog says Your website is live when it worked. If it shows Publishing failed, use the button on the banner: Try again for a temporary problem, Try to fix for an error in your app.
- Build errors. If the dialog says Build errors need fixing, the newest version can't be published until the build passes.
- Self-hosted and a refresh gives 404? Your host needs a rule that sends every page to
index.html. Ask your host's docs for "single page app rewrite". - Old files in the browser. Do a hard refresh (Ctrl + Shift + R, or Cmd + Shift + R on a Mac).
Cause 6: it isn't your app
- Check status.lovable.dev before you change anything. Lovable has had incidents where published projects showed blank pages, and the fix was to republish once it was resolved.
- If your app uses Lovable Cloud and the project was paused, wake it up under More > Cloud > Overview, then publish again.
- Blank for one person but fine for others? Ask them to try on mobile data. Some networks block sites.
A better prompt for Lovable
Paste this with your real error instead of "fix the white screen":
My published site is a blank white page but the preview works.
The first red error in the browser console on the LIVE site is:
[paste the exact error]
The Network tab shows: [paste any red requests and their status]
Please find the cause, explain it in one sentence, and fix only that.
Do not turn off row-level security. Do not put any secret key in a VITE_ variable.How to check it's really fixed
- Publish again (or redeploy on your host).
- Open the live site in a private window and on your phone using mobile data.
- The console has no red lines on load.
- Log in and do the main thing your app is for, like saving a record. A page that draws but can't save is a different problem.