Guides / Prompting and shipping

How to Fix a Blank White Page in Your Web App

Why a web app shows a blank white page and how to fix it: read the console, find missing files and wrong base paths, set env vars, and fix crashes and routing.

Mythex Team · 2026-09-29 · 7 min read

A blank white page almost always means one of two things: the app's JavaScript crashed before it drew anything, or the JavaScript never loaded at all. Open the browser console (right-click → Inspect → Console) and read the first red error, then check the Network tab for files that failed to load. Most causes are a missing environment variable, a wrong base path, a build that didn't finish, or a crash in one component.

This guide covers single-page apps built with React, Vue or similar frameworks (including apps made by AI builders), which is where blank pages are most common.

Why the page is white

A modern single-page app (SPA) sends the browser an almost empty HTML file, roughly this:

<body>
  <div id="root"></div>
  <script type="module" src="/assets/index-a1b2c3.js"></script>
</body>

JavaScript then builds the whole page inside that empty div. If the script fails to load, or throws an error before it renders, the div stays empty and you see white. The page isn't "broken" in a visible way; it just never got drawn.

That's why the fix always starts in developer tools, not in the page itself.

Step 1: Read the console

Open developer tools: right-click the page and choose Inspect, or press F12 (Cmd+Option+I on a Mac). Go to the Console tab and reload the page.

Look at the first red error; later ones are often side effects. What it says points to the cause:

Console message (typical wording)What it meansGo to
Cannot read properties of undefined (reading '...')Code expected data that wasn't thereStep 4
... is not defined / ... is not a functionA missing import, variable or settingStep 4 or Step 3
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"A script's URL returned an HTML page instead of JavaScriptStep 2
Uncaught SyntaxError: Unexpected token '<'Same thing: HTML where JavaScript was expectedStep 2
supabaseUrl is required, Missing API key, or similarAn environment variable is emptyStep 3
Access to fetch ... has been blocked by CORS policyA request to another domain was blockedSee fixing CORS errors
No errors at allRendering worked but shows nothing, or CSS hides itStep 6

Copy the full error text, including the file name and line number. If you're using an AI builder, paste it straight into the chat.

Step 2: Check that the files loaded

Open the Network tab, tick Disable cache, and reload. Look at the requests for .js and .css files.

  • Status 404 on a JavaScript file: the page is asking for a file that isn't on the server.
  • Status 200 but the type is text/html: the server returned a page (often index.html itself, because of an SPA fallback) instead of the script. Same root cause: the file isn't where the page expects it.

Common reasons:

Wrong base path. If the app is served from a sub-folder, like example.com/app/, but was built to load files from /assets/..., every script request misses. In Vite this is the base option in vite.config; in Create React App it's the homepage field; in Next.js it's basePath. It must match where the app is actually served.

Stale index.html. Build tools give files names with a content hash, like index-a1b2c3.js. After a new deploy, the old file is gone. If a browser or CDN still has the old index.html cached, it asks for the old file and gets nothing. A hard refresh (Cmd+Shift+R or Ctrl+Shift+R) confirms this. The long-term fix is to serve index.html with a short or no-cache header while hashed files are cached for a long time.

The build didn't finish or wasn't deployed. If the build failed, the host may be serving an old or empty output folder. Check the build log for errors.

The wrong folder is published. The host must serve the build output (usually dist or build), not the project's source folder. Serving the source gives you an index.html that points at /src/main.tsx, which browsers can't run.

Step 3: Check environment variables

Frontend apps often read settings like an API URL or a public key at build time. If a variable is missing on the live build, code like createClient(undefined, undefined) throws immediately, and the page goes white.

Things to know:

  • In Vite, only variables prefixed with VITE_ are available in browser code, read as import.meta.env.VITE_NAME. In Create React App it's REACT_APP_; in Next.js, NEXT_PUBLIC_.
  • These values are baked in when the app is built. Adding a variable after the build does nothing until you rebuild and redeploy.
  • The preview or local machine may have a .env file that the production build doesn't. Set the same variables on the host.
  • Anything with these prefixes ends up in public JavaScript. Only put public values there, never secret keys.

A quick test: search the console error for undefined near a setting name, or ask:

The published app shows a blank page. List every environment variable the frontend reads, check which are missing or empty in the live build, and make the app show a clear error message instead of a blank page when one is missing.

Step 4: Fix the crash

If the console shows a normal JavaScript error, the code crashed while rendering. Typical causes in AI-built apps:

  • Data not loaded yet. A component reads user.name before user has arrived. The fix is a loading state, or optional chaining (user?.name).
  • Empty data. A new account has no records, and code assumes the list has at least one item.
  • Unexpected data shape. An API returned an error object instead of the list the code expected.
  • A missing import after a file was renamed or moved.
  • Using a browser-only API during server-side rendering, such as window or localStorage in a Next.js server component.

Give the AI the full error, the page, and who you were logged in as:

The Dashboard page is blank for new users. Console: TypeError: Cannot read properties of undefined (reading 'map') at ProjectList.tsx:18. It works for my account, which has projects. Fix it so an empty account shows "No projects yet", and check a new account in the preview.

Step 5: Add an error boundary

In React, one crashing component can unmount the whole app, which is why a small bug produces a completely blank page. An error boundary is a component that catches rendering errors below it and shows a fallback instead.

Add an error boundary around the main routes that shows "Something went wrong" with a Reload button, and logs the error to the console. Keep the header and navigation outside it so they still render.

It doesn't fix the bug, but visitors see a message instead of a blank screen, and you see where it broke.

Step 6: No errors, still blank

If the console is clean and scripts load:

  • Check the Elements tab. Is there content inside <div id="root">? If yes, it's rendering but invisible: white text on white, opacity: 0, display: none, or a full-screen element covering it.
  • Check the router. If no route matches the current URL and there's no "not found" route, some routers render nothing. Add a catch-all route that shows a 404 page.
  • Check the mount point. The code must mount into an element that exists. If index.html has id="app" and the code looks for root, nothing appears (and React usually logs an error).
  • Check a browser extension. Try a private window. Ad blockers occasionally block scripts with names like analytics or ads.

Blank only after refreshing a page?

If the home page works but refreshing /dashboard shows a blank page or a 404, the server doesn't know to send index.html for app routes. That's a routing fallback problem, covered in how to fix 404 errors after deploying.

Common mistakes

  • Reading the last error instead of the first. The first red line is usually the cause.
  • Setting environment variables without rebuilding. Frontend variables are fixed at build time.
  • Testing only with your own account. Empty-account crashes are one of the most common blank-page causes.
  • Assuming the deploy worked. Check the build log before debugging the code.
  • Blaming the browser cache for everything. A hard refresh rules it out in seconds; if the page is still blank, it's something else.

Blank pages in Mythex

If the Preview is blank, first check the app is running (open Code → terminal), then ask Mythex to start the correct server, click Refresh in the preview toolbar, or use /fix. For a blank published URL, the docs suggest waiting a minute and hard-refreshing, confirming env vars and the database were set up before publishing, and checking your hosting allowance. Remember that a published app is a snapshot: after fixing something, publish again. If a change caused it, Revert to this point on the last good reply rolls the project back. See Troubleshooting and Publish troubleshooting in the docs, and our general guide to debugging an AI-built app.

Blank page checklist

  • Read the first red error in the Console
  • Checked the Network tab for .js/.css files that 404 or return HTML
  • Base path matches where the app is served
  • Build finished, and the build output folder is what's published
  • All frontend environment variables set on the live build, then rebuilt
  • Crash fixed, including for empty and new accounts
  • Error boundary in place so future crashes show a message
  • Catch-all route for unknown URLs
  • Tested after a hard refresh and in a private window

Questions

Why is my React app showing a blank white page?

Usually because JavaScript crashed before anything rendered, or because the JavaScript file never loaded. Open the browser console: a red error there tells you which, and the file and line where it happened.

Why does my app work locally but show a blank page after deploying?

The most common causes are environment variables that were never set for the live build, JavaScript and CSS files requested from the wrong path (a base path mismatch), and a stale cached index.html pointing at files that no longer exist.

What does 'Failed to load module script' mean?

The browser asked for a JavaScript file and got back an HTML page instead, usually the site's index.html or an error page. The file's path is wrong or the file doesn't exist on the server, so check the build output and the app's base path setting.

How do I stop one bug from blanking the whole page?

Add an error boundary. In React, an error boundary is a component that catches rendering errors in the part of the page below it and shows a fallback message instead of unmounting everything.

Keep reading

  • How to Add a Blog to Your Website: Options, SEO and Setup — How to add a blog to your website: Markdown files vs a built-in editor vs a CMS, subfolder vs subdomain, SEO basics, and prompts to build it with AI.
  • How to Add a Contact Form to Your Website (That Actually Reaches You) — How to add a contact form that works: save messages, get email alerts, stop spam, and avoid the mistakes that silently lose enquiries. Prompts included.
  • How to Add a Database to Your App (Without Losing Data Later) — How to add a database to an app you built: when you need one, Postgres vs hosted options, designing tables, prompts to use, and mistakes that lose data.
  • How to Add AI Features to Your App — Add summaries, chat, data extraction and classification to your app with an LLM API — keeping keys safe, costs under control and output trustworthy.
  • How to Add Analytics to Your App: GA4, Privacy-First Tools and Product Analytics — How to add analytics to your website or app: Google Analytics 4 vs privacy-first vs product analytics, what to track, cookie consent, and prompts to use.
  • How to Add Cookie Consent to Your Website — Add a cookie banner that actually blocks scripts until people agree: what needs consent, CMP vs custom, Google consent mode and a checklist. Not legal advice.

Start building free · Templates · Docs