Why my page is blank (white screen) — 3 causes and the first thing to open

Painfully familiar: you build an app, open it in the browser — and a white screen. Nothing. First thought: "everything's broken." Extra annoying when it worked a minute ago.

But here's the comforting part: a blank page is almost never actually blank. In 9 cases out of 10 one line broke, and the browser is whispering to you right now which one — you're just not looking in the right place. Let's go through the three causes, most common first. And the first move is the same for all three.

First things first — open the console

Don't guess, don't rewrite code at random. Open the developer tools: F12 (or right-click → "Inspect" → the Console tab). The console is where the browser writes what went wrong.

A white page with a red line in the console isn't a dead end — it's a clue with an address: the file and the line number. That's where we start.

Cause 1. A JavaScript error (the most common)

If you're building with React, Vue or plain JS, this is cause #1. One component crashed with an error, and the whole interface failed to render. That's the mechanic: a single JS error can wipe the entire screen at once.

How to check. In the console there'll be something red like Uncaught TypeError: Cannot read properties of undefined (reading 'map') — with a file and line next to it. Click the line and you jump straight to the crash site.

How to fix. Most often it's accessing data that isn't there yet: items.map(...) where items is still undefined (not loaded). Add a guard: items?.map(...), or check if (!items) return null before rendering. Don't understand the error text? Copy the whole thing and ask AI to help debug: paste the error and the code from the line it points to, not just "I have a white screen."

Cause 2. Wrong path to the files (especially after deploy)

A classic: everything works locally, you deploy it — white screen. That means the browser couldn't load your scripts and styles: the file paths slid off.

How to check. In the dev tools open the Network tab and refresh. If .js/.css files light up red with status 404, they weren't found. A common sign: locally the site opens at something like example.com/, but it deployed into a subfolder example.com/my-app/, and all the paths are looking in the wrong place.

How to fix. Set the base path to match where the site actually lives. In most bundlers it's one setting: base (Vite), homepage (Create React App), basePath (Next.js). Another common one: you opened the file by double-click as file://... instead of running it through a local server — that breaks paths too. Run it through the dev server, not by opening the HTML from the folder.

Cause 3. An empty root — nowhere to render

An app needs an "anchor" in the HTML — an element it will inject the interface into. If the anchor is missing or the id doesn't match, the code runs but has nowhere to draw — the screen stays blank.

How to check. In the console look for Target container is not a DOM element or null when accessing an element. This is about the DOM — the page's tree of elements. Open index.html: there should be a <div id="root"></div> (or #app), and in the code — getElementById('root') with the same id.

How to fix. Match the id in the HTML and in the JS letter for letter. root in the HTML and app in the code is the classic miss: the element isn't found, nowhere to render. Bring them to one name and the page comes alive.

I have a white screen, but the console is empty. What's that?

Then the cause usually isn't JS but styles: the content is there, just invisible (display: none, white text on white, a zero-height container). Check the Elements tab — if the elements are in the tree but not on screen, dig into CSS: why your CSS isn't working.

Why does it work locally but go blank after deploy?

Almost always Cause 2: file paths. A local server serves files from the root, but on a host the site may sit in a subfolder or build differently. Start with the Network tab and hunt for 404s — the fastest way to confirm the hunch.

Does just reloading the page help?

Sometimes — if it's a stale cache: hit a hard refresh (Ctrl+Shift+R or Cmd+Shift+R), which pulls fresh files instead of saved ones. But if the cause is in the code itself — a crashed JS, a wrong path, an empty root — an ordinary reload won't save you: the error just repeats. So the first step is still the console, not hammering F5.