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 :

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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/

Answer 5

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

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