React App Shows a Blank White Page After npm Start? Fix It

The terminal says your React app compiled successfully. The browser opens at localhost:3000. And the page is completely, stubbornly white — no logo, no error message, nothing. A blank white page is one of the most confusing problems in React, precisely because the screen gives you no clue about what went wrong.

The clue always exists — it is just hiding in the browser console, your component tree, or one wrong file path. This guide shows you where to look, in order.

Quick Answer

A React app shows a blank white page after npm start when JavaScript fails before anything renders — most often a runtime error in a component, a wrong import, a broken route, or an empty root element in index.html. Open the browser developer tools with F12 and read the Console tab first: the red error there almost always names the exact file and line causing the blank screen. Fix that error, or check that src/index.js correctly renders your App component into the element with the id root.

Why a Blank Page Happens at All

A React app delivers an almost empty HTML file containing one element, usually <div id="root"></div>, plus a JavaScript bundle that builds the entire page inside that element. If the JavaScript fails early — a crash on first render, a failed file, a missing import — nothing is ever drawn. The white page simply means something stopped the JavaScript before or during the first render.

Step 1: Read the Browser Console Before Changing Any Code

1. With your blank page open, press F12 to open the developer tools.
2. Click the Console tab and look for red error messages.
3. Read the first red error carefully. It typically names the component, the file, and often the line number — for example, that something is not defined, or that you cannot read a property of undefined.
4. Click the Network tab as well and refresh the page. A failed request in red, especially a 404 for the main JavaScript file, tells you the bundle never loaded at all.
5. Fix errors from the top down. The first error frequently causes a cascade of later ones, which disappear once the original is resolved.

Our guide to debugging JavaScript with Chrome DevTools breakpoints shows how to pause execution and inspect values at the exact moment things go wrong.

Step 2: Check the Entry Point and the Root Element

If the console is oddly quiet, verify the wiring between your HTML file and your JavaScript entry file. These two files must agree with each other perfectly.

In public/index.html

Open public/index.html and confirm it contains an element with the exact id root — spelling and case matter. If someone edited this file and renamed or deleted that element, React has nowhere to draw and the page stays white.

In src/index.js

Open your entry file, usually src/index.js or src/main.jsx. It should import your top component and render it into that same root element. In modern React the pattern looks like creating a root with ReactDOM.createRoot(document.getElementById('root')) and then calling root.render(...) with your App component inside it. Check three things: the App import path is correct, the id string in getElementById matches the HTML exactly, and the render call has not been commented out or deleted during editing. The current official guidance in the React documentation for createRoot on react.dev shows the correct modern setup to compare yours against.

Step 3: Hunt the Runtime Error in Your Components

The single most common cause is a component that crashes while rendering. The app compiles because the syntax is legal, but the code fails the moment it runs. Typical examples include:

• Reading a property of data that has not loaded yet, such as showing user.name when user is still undefined on the first render before an API reply arrives.
• Calling a function or using a variable that was never defined or was renamed in one file but not another.
• Using a value from a hook or a library in a way its API does not allow, such as reading router data in a component that sits outside the router.
• Returning nothing — literally return null or an empty fragment — from the top-level App component after an edit, which renders successfully but draws nothing at all.

A fast way to isolate the culprit is the bisection method. Temporarily simplify App so it returns only a plain heading like <h1>Testing</h1>. Reload. If the heading appears, the entry point and bundle are healthy, and the bug lives in one of your real components. Add components back one at a time, reloading after each, until the white page returns — the last component you restored is the one to inspect. If even the plain heading does not appear, the problem is outside your components, in the entry wiring, routing, or file loading covered in the other steps.

Step 4: Fix Bad Imports and Missing Files

Import mistakes are blank-page regulars, and Windows can hide one particular trap. Check the following:

• Wrong relative path: an import pointing one folder too high or too low, so the file cannot be found or the wrong file loads.
• Default versus named exports: importing a component as a default import when the file uses a named export, or the reverse. The result is an undefined component, and React cannot render undefined.
• Case sensitivity: on Windows, the file system usually forgives importing ./header when the file is really Header.js. The development compiler may accept it, a teammate’s machine or a Linux deployment will not, and some setups fail immediately. Match the import text to the file name exactly, letter for letter.
• A deleted or moved file: after reorganising folders, one stale import can survive and poison the whole bundle.

Step 5: Check Routing and the Homepage Setting

If your app uses React Router, a routing mistake can render a perfectly healthy app as an empty page. Open your route definitions and check that a route actually matches the address in the browser bar. A common pattern is defining routes for paths like /home and /about but no route for plain /, so the home address matches nothing and the router outlet draws a blank area. Add a route for /, or a catch-all route that shows a simple not-found message instead of emptiness.

A related trap: in Create React App, a wrong homepage field in package.json makes the built page request its JavaScript from the wrong location, causing 404 errors and a white screen. The Create React App deployment documentation explains this setting.

Step 6: Rule Out CSS, Stale Cache, and Extensions

Occasionally the app renders and the content exists, but you cannot see it. White text on a white background, a full-screen overlay with no visible content, or a global style that hides the root element can all fake a blank page. In the developer tools Elements tab, inspect the root element: if it is full of HTML, your app rendered and the problem is styling. Clicking the rendered elements and checking their computed styles will reveal the culprit.

Also try a hard refresh with Ctrl + Shift + R, open the page in a private window to rule out extensions, and restart the development server after big changes.

Common Mistakes and Useful Tips

• Editing files before reading the console. The console almost always names the failing file. Ten guesses are slower than one careful read.
• Assuming a successful compile means the code works. Compiling only proves the syntax is valid. Runtime behaviour is a separate test, and the white page lives in that gap.
• Fixing the third error first. Errors cascade. Always fix the first red console error, reload, and see what remains.
• Testing only one address. If one route is blank and others work, your problem is that route’s component or path, not the whole app.
• Tip: keep a known-good simple component ready. Swapping App for a plain heading for sixty seconds cleanly splits “the app cannot start” from “one component is broken”.

Conclusion

A blank white React page means the JavaScript stopped before the first render — and it always leaves evidence. Read the console first, verify the root element and the render call in your entry file, isolate crashing components by adding them back one at a time, and check imports, routes, and file paths. Work in that order instead of guessing, and most white pages turn back into working apps within minutes, with a debugging habit that will serve you on every project that follows.

Frequently Asked Questions

Why does the terminal say “compiled successfully” but the page is blank?

Compilation checks that your code is valid and can be bundled. It cannot guarantee the code runs without errors. A component that crashes while rendering still compiles, and because React draws nothing until the first render completes, the page stays white.

How do I find the error if the page shows nothing?

Press F12 and open the Console tab. JavaScript errors are reported there even when nothing renders, and the first red message normally includes the component name, file, and line number where execution failed.

My app works on localhost but is blank after deployment. Why?

The usual causes are a wrong base path — the homepage setting in a Create React App project — or file-name case differences that Windows forgave but the Linux hosting server does not. Check the Network tab on the live site for 404 errors on the JavaScript files.

Can CSS really cause a completely white page?

Yes. Content rendered under a white overlay, white text on a white background, or a rule that hides the root element all look identical to a crash. Inspect the root element in developer tools: if it contains your HTML, the app rendered and styling is the problem.

What should I check first in src/index.js?

Confirm three things: the App component is imported from the correct path, getElementById uses the exact id present in public/index.html — normally root — and the render call is present and not commented out.