How to fix the white screen after build with create-react-app?

Question

I used react-router-dom and I build my react-app. When I deploy it on the server, I get a blank page and the console is empty.

My App.js is :

import React, { Component } from 'react';
import { Route, Switch, BrowserRouter} from 'react-router-dom';
import Agenda from './components/Agenda/Agenda';
import Planning from './components/Planning/Planning';
class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter  basename="/">
          <Switch>
            <Route exact path="/"  component={Agenda} />
            <Route path="/planning" component={Planning} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

My index.js is :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
        <App/>
, document.getElementById('root'));

My index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon"  href="favicon.ico">
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
     <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet"> 
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
     <link rel="manifest" href="manifest.json">
     <link rel="data" href="data.json">
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <title>Test</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
  </body>
</html>

In my package.json, I have :

"homepage": "."

And when I change my homepage to https://dev.test.com/Reactand when I run it, I get a blank page, such as the address, which I deployed is : https://dev.test.com/React/ It is not public. When I run serve-s build, I get a blank screen on the console, I get:

My index.html on production is :

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <link rel="shortcut icon" href="favicon.ico">
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
        <meta name="theme-color" content="#000000"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
        <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
        <link rel="manifest" href="manifest.json">
        <link rel="data" href="data.json">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
        </script>
        <title>Test</title>
        <link href="/React/static/css/2.2aa93811.chunk.css" rel="stylesheet">
        <link href="/React/static/css/main.ca6e1d23.chunk.css" rel="stylesheet">
    </head>
    <body>
        <div id="root"></div>
        <script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
        <script>!function(f){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],l=0,a=[];l<n.length;l++)t=n[l],c[t]&&a.push(c[t][0]),c[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(f[r]=o[r]);for(s&&s(e);a.length;)a.shift()();return p.push.apply(p,u||[]),i()}function i(){for(var e,r=0;r<p.length;r++){for(var t=p[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==c[u]&&(n=!1)}n&&(p.splice(r--,1),e=l(l.s=t[0]))}return e}var t={},c={1:0},p=[];function l(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return f[e].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=f,l.c=t,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(r,e){if(1&e&&(r=l(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)l.d(t,n,function(e){return r[e]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/ReactCalendar/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;i()}([])</script>
        <script src="/React/static/js/2.4a7f0704.chunk.js"></script>
        <script src="/React/static/js/main.f9268394.chunk.js"></script>
    </body>
</html>

How can I fix it ?

Is `/React` a directory on your server? Also can you provide the compiled `index.html` from your production build? — Rallen, May 09 '19 at 07:50
@Rallen yes `/React` is a directory on my server, can you chek my post please ? I add the compiled `index.html` on production. When I run it on my server, the console is empty. — Ichrak Mansour, May 09 '19 at 08:01

score 24 · Accepted Answer · answered May 09 '19 at 08:23

Try changing basename="/" on your BrowserRouter to basename="/React". react-router needs this if used in a sub-directory.

From the react-router docs:

basename: The base URL for all locations. If your app is served from a sub-directory on your server, you'll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.

Also change homepage in package.json to the url of your production target. homepage="." means it will work on every domain where it is located in the server root (and is also the default behaviour).

From the React docs regarding deployment:

By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the homepage in your package.json, for example:
"homepage": "http://mywebsite.com/relativepath",
This will let Create React App correctly infer the root path to use in the generated HTML file.

The homepage will be `"homepage":"."` or `"homepage":"https://dev.test.com/React"` ? — Ichrak Mansour, May 09 '19 at 08:30
Hi! Can you please share which homepage you ended using? I've been trying so many variations. Does need to be `http` or `https`? What should go where `relativepath` is? — Tsabary, Apr 22 '20 at 15:21
I had to use my domain's exact BASE URL instead of '.' in "homepage" because it was not showing images. Besides that this method worked like a charm, thanks! — Zeeshan Ahmad Khalil, Feb 22 '21 at 10:38

Muhammad Arsalan Hassan · Answer 2 · 2020-12-21T05:30:41.503

9

I ran into the same problem and solved it!

If anyone has still this issue, follow the following steps.

1 - You need to update your browser. Refer to this, https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers

2- You need to add "react-router-dom": dependency to your package.json file using npm i react-router-dom

3- Add "homepage": ".", to your package.json file

Hope this helps.

edited Dec 21 '20 at 05:30

answered Feb 21 '20 at 07:05

Muhammad Arsalan Hassan

567
4
22

4

Only Add "homepage": ".", to your package.json file – Kourosh Neyestani May 17 '20 at 17:41
I've done this and still no luck – Acire Jul 06 '22 at 15:04

score 6 · Answer 3 · answered Apr 18 '20 at 01:33

6

I also had this problem, blank white screen, no errors. None of these answers solved my problem. I'm gonna leave the solution to my problem here, so that someone else like me wont spent 2 hours on a small mistake.

Just make sure you upload all files in /build folder to the server.

answered Apr 18 '20 at 01:33

Mubariz Hajimuradov

475
1
9
20

1

I did the same! my issue still persists. I just uploaded all my files from the build folder to s3. When I load my S3, it is showing blank screen and no errors. – uday reddy Jun 08 '20 at 04:40

twknab · Answer 4 · 2021-07-30T02:33:41.893

Just adding an additional answer, as I know there are many causes for this. I was experiencing a white page following build, and saw a 404 in browser console for web chunks. I'd set 'homepage' in package.json, and was perplexed.

Server side caching

However, I noticed in the 404 message, the chunk being referenced had a different hash than the one in my build folder; these "old" chunks were trying to be fetched, and not the new ones from the latest build with different hashes in the filename.

e.g, the 404 error in my browser console was pointing to a chunk with a hash something like:

main.f1d2d060.chunk.css // from an old build
     ^^^^^^^^^

Where as in /build folder, the chunk was actually:

main.adg25e108.chunk.css // from latest build
     ^^^^^^^^^

Thus I realized some file must be cached trying to retrieve the old thing rather than the new. Turned out I'd had server-side caching enabled, and the old web chunks were trying to be retrieved by a cached version of asset-manifest.json... :sigh: ...I was able to flush the cache for my web host (SiteGround).

Flushing cache will vary depending upon your host: https://www.siteground.com/kb/clear-site-cache/

Something to consider if you've tried everything else -- double and triple check the hash string in the 404 in your console matches that in your /build folder, else you might be in the same situation with an old asset-manifest.json trying to retrieve the wrong stuff.

score 5 · Answer 5 · answered Sep 29 '21 at 08:48

5

What's worked for me is adding basename="/index.html" to the BrowserRouter :

<BrowserRouter basename="/index.html">
   ...
</BrowserRouter>

answered Sep 29 '21 at 08:48

DessM2C

71
1
8

3

It's a real disaster how many different answers there are. And all of them seem to have helped somebody. This one helped me! I am running Nginx on Linux. – MickeyDickey Nov 03 '21 at 16:22

score 4 · Answer 6 · edited Dec 12 '21 at 05:36

4

I had the same "white screen" issue, I solved with just adding:

<BrowserRouter basename="/">

basename="/" in the index.js file.

that worked for me, hope it works for you.

edited Dec 12 '21 at 05:36

Rifky Niyas

1,737
10
25

answered May 07 '21 at 21:56

Victor Teppa

39
2

score 3 · Answer 7 · answered Dec 05 '20 at 05:22

3

Rearranging like this worked for me, remove exact? from root path

<Router>
  <Route exact path="/about" component={About} />
  <Route path="/" component={App} />
</Router>

answered Dec 05 '20 at 05:22

Acushla

89
1
6

I used hompage="." in my package.json but '/about' not going to the relative path – Acushla Dec 05 '20 at 05:23

score 3 · Answer 8 · answered Apr 19 '21 at 22:37

I just add basename='/index.html' on my index.html, see code below for more :

import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import LoginPage from './components/LoginPage/LoginPage';
import Dashboard from './components/Dashboard/Dashboard';

function App() {
  return (
    <Router basename='/index.html'>
      <Switch>
        <Route path='/' exact component={LoginPage} />
        <Route path='/dashboard' component={Dashboard}/>
      </Switch>
    </Router>
  );
}

export default App;

Hope it would help.

score 2 · Answer 9 · answered Sep 22 '20 at 15:15

I had this problem. I was trying to open the application after build with double-clicking the index.html and didn't work either, I got the blank page but if the built files are run in a server environment works. https://create-react-app.dev/docs/deployment/

score 2 · Answer 10 · edited Dec 11 '21 at 21:29

2

None of the above answers work for me. So I tried to run it in a different port and it works.

serve -s build -l 4000

edited Dec 11 '21 at 21:29

Rifky Niyas

1,737
10
25

answered Jun 13 '21 at 18:17

lbudwal

141
1
7

score 2 · Answer 11 · answered Jun 30 '21 at 20:18

2

This may be due to a page whose route you've renamed.

I had a white screen that showed no errors, because I was using history.push to send the user to a page that we had renamed.

The page no longer existed, so it displayed a blank white screen.

answered Jun 30 '21 at 20:18

David

895
8
12

score 1 · Answer 12 · answered Jan 07 '22 at 05:05

1

Had this issue with react-router-dom v6, What has worked for me is replacing <BrowserRouter> with <HashRouter> and adding "homepage": "." in package.json

answered Jan 07 '22 at 05:05

KarimHesham

111
1
8

Beary · Answer 13 · 2022-03-12T14:21:54.930

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./pages/index"
import SignInPage from "./pages/signin";

function App() {
  return (
    <Router>
     <Home />
      <Routes>
        <Route path='/' component={Home} />
        <Route path='/signin' component={SignInPage}/>
      </Routes>
   </Router>
  );
}

export default App;

I have tried all of the above and none has worked. I am doing a code along where Switch was used in the BrowserRouter but the docs say to use Routes in place of Switch. In the second code, I put component back in and the site came back but it still will not route, not sure why.

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./pages/index";
import SignInPage from "./pages/signin";

function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' component={Home} />
        <Route path='/signin' component={SignInPage}/>
      </Routes>
   </Router>
  );
}

export default App;

OK, the components should be {} and {} this fixed it and I removed the lone , Router now works! — Beary, Mar 12 '22 at 14:40

score 0 · Answer 14 · answered Jul 15 '22 at 05:26

If getting blank page without any console errors then issue is in configuration of Router.

Normally happens when u are moving the build file to a particular location in server.

Basename must match where u are running the file in the address bar.

If url of address bar reads: http://localhost:3333/build/index.html then basename will be /build/index.html

otherwise if u are running on http://localhost:3333/index.html then basename will be /index.html etc. its the path after first slash.

If its just '/' then make it same on basename

...

score 0 · Answer 15 · answered Mar 14 '23 at 17:00

I ran into a very similar problem while running my code (before deployment) and after pulling my hair out decided to boot up another project and tried running it, and it did the same thing... white page and shows its loading. Figured it must be an issue with IISExpress, so I restarted my computer and the problem went away immediately.

How to fix the white screen after build with create-react-app?

15 Answers15

Server side caching

Linked