Fix: Lovable App Shows Blank White Screen After Deployment
Quick Answer
Open browser DevTools (F12) > Console tab. The real error is always there. The #1 cause is a missing environment variable in production that exists in development.
Symptoms
- !App deploys successfully but shows nothing — just white
- !Preview works fine but deployed version is blank
- !Browser console shows JavaScript errors
- !React fails to mount with no visible error on screen
Step-by-Step Fix
Check the browser console
Open your deployed app, press F12, click Console. You'll see the actual error. Common ones: 'NEXT_PUBLIC_SUPABASE_URL is not defined' or 'Cannot read properties of undefined'.
Check environment variables
Go to your deployment platform > Environment Variables. Add every variable that starts with NEXT_PUBLIC_ from your development setup. Missing env vars cause silent crashes.
Look for hydration mismatches
If the console shows hydration errors, it means server-rendered HTML doesn't match client HTML. Common cause: using browser-only APIs (window, localStorage) during server rendering.
Test with production build locally
Run npm run build && npm start locally. This simulates production mode. If it crashes here too, the error is in your code, not the deployment platform.
Frequently Asked Questions
Preview mode (development) is more forgiving — it skips errors and shows partial content. Production mode (deployment) crashes on the first unhandled error. The fix is to handle errors properly or fix missing env vars.
Missing environment variables. Development has .env.local. Production needs those same variables added manually in the deployment platform settings.
Related
Weekly Newsletter
Get next week's fix before you need it.
Join developers getting weekly vibe coding tips, error fixes, and tool updates.
Subscribe on Substack →