Fix Blank Page After React Build: Common Causes and Solutions

A blank page after building a React app usually happens because the app's basename or homepage is not set correctly, causing routing or asset loading issues. Fix this by setting the homepage field in package.json or configuring the router's basename to match your deployment path.

Why This Happens

When you build a React app, the app expects to load assets and routes relative to a specific base path. If this base path is wrong or missing, the browser can't find the JavaScript files or routes, resulting in a blank page.

For example, if your app is deployed to /myapp/ but the build assumes /, it will look for files in the wrong place.

jsx

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

export default App;

Output

Blank page after build because assets and routes are not found at the expected paths.

The Fix

Set the homepage field in your package.json to the URL path where your app is hosted. Also, configure BrowserRouter with the matching basename so routing works correctly.

This tells React where to find assets and how to handle routes after build.

json + jsx

/* package.json */
{
  "name": "my-app",
  "version": "1.0.0",
  "homepage": "/myapp/",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.2"
  }
}

// App.jsx
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/myapp">
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

export default App;

Output

App loads correctly with routes and assets found, showing the Home Page after build.

Prevention

Always set the homepage in package.json before building if your app is not hosted at the root URL.

Use basename in BrowserRouter to match the deployment path.

Test your build locally with a static server to catch path issues early.

Use tools like serve or http-server to simulate production environment.

Related Errors

1. 404 Errors on Refresh: Happens when the server does not redirect all routes to index.html. Fix by configuring your server to serve index.html for all routes.

2. Assets Not Loading: Caused by wrong paths. Fix by setting correct homepage or using relative paths.

Key Takeaways

Set the homepage field in package.json to your app's deployment path before building.

Use BrowserRouter's basename prop to match the homepage path for correct routing.

Test your production build locally with a static server to catch path issues.

Configure your web server to serve index.html for all routes to avoid 404 on refresh.

Ensure asset paths are correct to prevent blank pages after build.