// Browser shows a blank white page
// No errors visible (or errors only in console)

Your React app compiled but nothing renders. The “white screen of death” has many causes.

Fix 1: Check the Browser Console

# Open DevTools (F12 or Cmd+Option+I)
# Look at the Console tab for errors
# Common: TypeError, SyntaxError, or import errors

The console almost always has the answer. Fix whatever error it shows.

Fix 2: Component Returns Nothing

// ❌ Forgot to return JSX
function App() {
    const data = fetchData();
    // No return statement → renders nothing
}

// ✅ Return JSX
function App() {
    return <div>Hello</div>;
}

Fix 3: Error in Rendering (No Error Boundary)

// ❌ Error during render crashes the entire app silently
function App() {
    return <div>{user.name}</div>;  // 💥 user is undefined
}

// ✅ Add an Error Boundary
class ErrorBoundary extends React.Component {
    state = { hasError: false };
    static getDerivedStateFromError() { return { hasError: true }; }
    render() {
        if (this.state.hasError) return <h1>Something went wrong.</h1>;
        return this.props.children;
    }
}

// Wrap your app
<ErrorBoundary><App /></ErrorBoundary>

Fix 4: Wrong Root Element ID

<!-- ❌ index.html has id="app" but React looks for "root" -->
<div id="app"></div>

<!-- main.jsx -->
ReactDOM.createRoot(document.getElementById('root'))  // 💥 null

// ✅ Match the IDs
ReactDOM.createRoot(document.getElementById('app'))

Fix 5: Build Output Not Served

# ❌ Running build but serving wrong directory
npm run build
# Serving from / but build output is in /dist or /build

# ✅ Serve the correct directory
npx serve build    # Create React App
npx serve dist     # Vite

Fix 6: Router Misconfiguration

// ❌ No route matches the current URL
<Routes>
    <Route path="/dashboard" element={<Dashboard />} />
    // Visiting "/" → nothing renders
</Routes>

// ✅ Add a catch-all or index route
<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="*" element={<NotFound />} />
</Routes>

Related resources

• React hooks order fix
• React hydration mismatch fix
• React complete guide Related: React useState Not Updating — How to Fix Stale State Related: React useContext Returns Undefined — How to Fix It