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:

Answer 1

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"     }   ] } 

Answer 2

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>