Why is React Webpack production build showing Blank page?

Question

I'm building a react app, and at the moment webpack-dev-server works just fine( the hello world text shows up ), But webpack -p shows blank page. For the Production build The network tab under chrome dev tools, shows index.html and index_bundle.js to have size 0 B(see picture) But That is clearly not the case HTML file size is 227 B & index_bundle.js file size is 195Kb(see picture)

Also Chrome Devtools Elements Tab shows the following(see picture)

My webpack config file looks like this:

What does your production config look like for webpack? json stringify the configuration. — ctrlplusb, May 31 '16 at 16:04
If you look at the difference between the development/production configuration you will see that only the development configuration contains the `devServer` node. You may need to consider adding an additional environment argument that indicates you wish to do production based hosting and then inject the devServer node accordingly. — ctrlplusb, May 31 '16 at 16:17
To prove this point copy the `devServer` node into the `productionConfig`. — ctrlplusb, May 31 '16 at 16:17
I copied the devserver to the productionConfig right above the plugins, and yet still the same result — jasan, May 31 '16 at 16:24
Sorry, just stabbing at this, but you may need to copy the `new webpack.HotModuleReplacementPlugin()` across to your production config too. — ctrlplusb, May 31 '16 at 16:29
Again, I must not that if this works all it serves is to prove that you can get it work. I do recommend you add another env flag to enable/disable this feature. — ctrlplusb, May 31 '16 at 16:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/113437/discussion-between-ctrlplusb-and-jasan). — ctrlplusb, May 31 '16 at 16:38
I was using browser history in my routes config file, once i changed that to hashHistory the production build is working. WHy is that? — jasan, May 31 '16 at 23:32

score 26 · Accepted Answer · answered Jun 01 '16 at 00:51

I figured it out, I was using browserHistory without setting up a local server. If i changed it to hashHistory it worked. To test webpack production locally with react-router browser history i needed to do this Configure a Server:

Your server must be ready to handle real URLs. When the app first loads at / it will probably work, but as the user navigates around and then hits refresh at /accounts/23 your web server will get a request to /accounts/23. You will need it to handle that URL and include your JavaScript application in the response.

An express app might look like this:

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/public'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

And just in case anyone is deploying to firebase using react-router with browser-history do this:

{
  "firebase": "<YOUR-FIREBASE-APP>",
  "public": "<YOUR-PUBLIC-DIRECTORY>",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}

but there is a problem - my index.html load css files, bundle.js - and the server attempts to load it via "*" route - and as result - in the browser rendered nothing. How can I fix that? Thanks in advance! — kurumkan, Nov 30 '16 at 11:12
So in this example you use hash history? or browser history thanks in advance. I am having the same problem — Peak Sornpaisarn, Dec 10 '16 at 10:39
This worked for me! `import {HashRouter as Router} from 'react-router-dom'` instead of `import {BrowserRouter as Router} from 'react-router-dom'`. I'm trying to deploy a React.js site on Swarm and after several hours, the hash router was the only way I could get it to work! — Eamorr, Mar 18 '17 at 19:57

score 10 · Answer 2 · answered Jun 02 '18 at 14:10

10

use

import { HashRouter } from 'react-router-dom';

instead of

import { BrowserRouter} from 'react-router-dom';

and don't forget to replace it in your routes code

<HashRouter>
  ...
</HashRouter>

answered Jun 02 '18 at 14:10

Yecodeo

371
4
14

score 3 · Answer 3 · answered Jun 26 '20 at 08:21

3

Changing

import {BrowserRouter as Router} from 'react-router-dom'

to:

import {HashRouter as Router} from 'react-router-dom'

in App.js helped me fix the same issue in my create-react-app project.

answered Jun 26 '20 at 08:21

CGatwiri

31
2

not a good solution, mainly when auth libraries are present. – Saswata Jun 16 '21 at 09:55

score 2 · Answer 4 · answered Aug 25 '18 at 07:14

GitHub Pages doesn’t support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42, where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:

You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.
Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in this guide.

score 2 · Answer 5 · answered Mar 05 '19 at 08:22

<BrowserRouter basename="/calendar" />
<Link to="/today"/> // renders <a href="/calendar/today">

basename: string
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.

score 1 · Answer 6 · answered Mar 02 '20 at 16:05

1

None of these worked for me my error was because I mixed up folders

Solution:

npm run build

my apache config:

did not work

DocumentRoot /var/www/sites/example.com/client/public/

worked (build folder not public)

DocumentRoot /var/www/sites/example.com/client/build/

answered Mar 02 '20 at 16:05

Michael Nelles

5,426
8
41
57

This saved a lot of time – Shibu Oct 21 '20 at 12:46

score 0 · Answer 7 · answered Apr 27 '20 at 00:08

I had a unique solution - only one page was not running for me. So I just inspected the console log and found the error. For some reason, the error was only displaying for "react-scripts-build", not "react-scripts-start".

This resulted in a blank page

Why is React Webpack production build showing Blank page?

7 Answers7

Linked