Why is React Webpack production build showing Blank page?
jasan
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:
jasan
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"
}
]
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
react app showing empty page when redirecting on production build
- 2
React Router With Handler showing blank page
- 3
Webmatrix showing blank page
- 4
showing blank page to stop flicker until react gets data
- 5
Blank page after running build on create-react-app
- 6
Why does React Native WebView go to about:blank in release build?
- 7
javascript blank page showing up
- 8
Webpack how to build production code and how to use it
- 9
Webpack production build does not load anything
- 10
Facebook App Canvas Showing Blank Page
- 11
Facebook Graph API Explorer is showing a blank page
- 12
dompdf freezes not showing content. page is blank
- 13
webview error screen showing blank page
- 14
Facebook Graph API Explorer is showing a blank page
- 15
Skyepub on swift2 showing blank page
- 16
How to fix AMPPS showing blank page
- 17
Social media links showing blank page
- 18
React Router Renders Blank Page
- 19
React router renders a blank page
- 20
How to package to 'production' my react website with Webpack?
- 21
Configuring CSS modules in development/production with webpack and React
- 22
Ionic apk showing blank page but showing list of products in browser
- 23
Why is JApplet showing a blank gray screen?
- 24
Why is JApplet showing a blank gray screen?
- 25
LoadRunner - Why my parameters are showing blank?
- 26
json string is showing blank why is not getting decoded
- 27
Symfony2 always displays blank page in production
- 28
Embedding slideshare presentation in django project - blank page on production
- 29
Facebook login page showing blank page in IOS 9
Comments