CODEWITHSUNDEEP
javascriptweb-applicationsreactjswebpackredux
jasan
jasan

Reputation: 12967

Why is React Webpack production build showing Blank page?

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)enter image description here 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) enter image description here

My webpack config file looks like this:enter image description here

Upvotes: 27

Views: 25949

Answers (7)

CGatwiri
CGatwiri

Reputation: 31

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.

Upvotes: 3

Nikola Tesla
Nikola Tesla

Reputation: 71

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

Upvotes: 0

Michael Nelles
Michael Nelles

Reputation: 6032

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/

Upvotes: 1

Beans
Beans

Reputation: 21

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

Upvotes: 2

s4ndhyac
s4ndhyac

Reputation: 586

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.

Upvotes: 2

Yecodeo
Yecodeo

Reputation: 371

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>

Upvotes: 10

jasan
jasan

Reputation: 12967

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

Upvotes: 26

Related Questions