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 pa

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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/

Answer 5

<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.

Answer 6

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