Lovable app shows a blank white screen? Find the real error
A blank page after publishing means the app crashed before it could draw. How to read the console, what each common error means and how to fix it in Lovable.
Leer en español →
A blank white screen on a published Lovable app means the JavaScript that draws your pages either crashed on the first render or never loaded at all. The page itself arrived, so the server is fine; something in the browser stopped. Open the live site, open the browser console, and read the first red error: it tells you which of a handful of causes you're dealing with, and most of them are fixed in minutes once you know.
Below: how to get the error in under a minute, a table of the errors that cause most blank screens, Lovable-specific checks, and how to make sure the next crash shows a message instead of an empty page.
Why is my Lovable app blank when the preview works?
The preview and the published site aren't the same environment. The published site is a separate build of whatever version you last published, served at a different address, often with real data and real logged-out visitors. That's why "it works in the editor" doesn't rule much out. A blank page usually comes from one of these:
- the live build is missing a value it needs at startup (an environment variable),
- the code crashes on data the preview never had (an empty list, a missing field, a logged-out user),
- the browser holds an old copy of the page that points to files that no longer exist,
- the latest changes never made it live because the build failed or wasn't published.
How do I see the actual error?
- Open the published address (your domain or the
lovable.appURL), not the editor preview. - Open the developer tools: right-click the page and choose Inspect, or press F12 (Cmd+Option+I on a Mac).
- Click the Console tab and reload the page.
- Find the first red error. Later ones are usually side effects.
- Switch to the Network tab, reload, and look for rows in red, especially
.jsfiles with a 404.
On a phone, the quickest route is to reproduce the problem on a computer with the same account. If it only fails on the phone, note the device and browser.
What do the common errors mean?
| What you see | What it means | Fix |
|---|---|---|
supabaseUrl is required. | The backend address wasn't available when the app was built | Make sure VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY are in .env (or your host's settings) and rebuild |
Cannot read properties of undefined (reading 'map') or similar | Code expects data that isn't there for this user | Guard the empty case and check the query returns what the page expects |
Failed to load module script with a MIME type of "text/html" | The page asks for a script file that no longer exists, and the host sends back HTML | Hard-reload; if it persists, republish and check nothing caches index.html |
Failed to fetch dynamically imported module | A visitor's open tab is from an older deploy | Reload fixes it; handle it in code by reloading once on this error |
| No error, but a 404 on the page itself | Only on your own host: missing fallback to index.html for app routes | Add the rewrite rule for your host |
Errors mentioning 401 or permission denied | The app crashes when a request is refused | Fix the policy or session, and handle the refusal without crashing |
Missing environment variables
Lovable keeps browser-safe values such as VITE_SUPABASE_URL in the project's .env file and embeds them at build time. Lovable's secrets documentation warns not to add .env to .gitignore in a Lovable project, because the build needs it. If a developer or a prompt "cleaned up" that file, the next build ships without the values and the Supabase client throws on startup. If you host the frontend elsewhere, the same values must be set in that host's environment settings, and you have to rebuild after setting them.
Crashes on real data
The preview often runs with your own account and tidy test data. Production has new users with no records, old records with missing fields, and visitors who aren't signed in. Ask Lovable for a targeted fix and give it the full error line, including the file and line number:
My published app shows a blank screen. This is the first error in the browser console:
TypeError: Cannot read properties of undefined (reading 'map') at Dashboard (index-abc123.js:212)
Fix only the code involved, and handle the case where the list is empty or missing.What should I check in Lovable itself?
- Did the publish succeed? Open the Publish dialog. If it shows Build errors need fixing, the live site is still the previous version, or a broken one. Use Try to fix, then publish again.
- Are your latest changes live? Each publish is a snapshot. A small dot on the Publish button means there are newer changes; click Publish, then Publish changes.
- Did a revert or Git push change things? Check version history for the last change before the blank screen started.
- Is the backend paused? If the built-in backend (Cloud) is paused, edge functions stop and features that depend on them fail.
If the error points at your backend rather than the page, the logs under More → Cloud → Logs show the failing request. Projects created since May 2026 run on TanStack Start and render pages on the server, so a crash there can also leave a trace in Server logs.
How do I confirm it's fixed?
- Open the site in a private window, signed out. The landing page should render.
- Sign in with a brand-new test account that has no data. This is the case that crashes most often.
- Sign in with a real account that has a lot of data.
- Open a deep link directly, such as
/settings, and refresh it. - Try a phone on mobile data, not just your office Wi-Fi.
How do I stop the next crash from being a blank page?
- Add an error boundary. In React, an error boundary catches a crash in part of the page and shows a fallback ("Something went wrong, reload") instead of nothing. Ask Lovable to add one around the main routes.
- Turn on monitoring. Lovable's Project monitoring (in beta on Pro plans and above) checks recent visitor errors and flags them. A dedicated error tracker gives you more detail; see our guide to monitoring and error tracking for a small app.
- Check the live site after every publish, not only the preview. Two minutes in a private window catches most of these.
For a broader checklist when something that worked yesterday stops today, read finding what broke in your Lovable or Bolt app. If you've already tried several AI fixes without luck, breaking a Lovable fix loop will save you credits.
Quick answers
Why is my site blank only for some people? Usually because their data or session triggers a crash yours doesn't, or their browser holds an old cached page. Ask for the first console error from their browser.
Does a blank page mean my data is gone? No. The page failed to draw. Your database is separate and almost always unaffected.
Should I republish to fix it? Only after you know the cause. Republishing the same code rebuilds the same crash, unless the problem was a stale or failed build.
Still staring at a white page?
If the console shows nothing useful or the fix keeps sliding to a new error, a short review of the code usually finds it. Try the free health check, see how we fix Lovable apps, or send us the address and the error.
