Why Is React Webpack Production Build Showing Blank Page

Why is React Webpack production build showing Blank page?

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

React production shows blank page

Solved! was a problem of "browserHistory"

If you use the "browserHistory" as history manager your webpack needs a node.js server to run, using a "hashHistory" you can use it as a normal web page!

See
Why is React Webpack production build showing Blank page?

Blank page with React, TypeScript, and Webpack

I know there were many similar questions, but none of them solved my issue after hours of searching. Finally, I came across this SO post, and it solved the issue for me. Here's what I did:

Add index.html to /src/index.html:

<html>
  <body>
    <div id="root"></div>
  </body>
</html>

Install html-webpack-plugin to render React on an HTML page: yarn add html-webpack-plugin --dev
Update my Webpack config to load my app on the HTML file I just created:

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
  ...
}

Then it worked!

Blank page after running build on create-react-app

I solved the problem by setting

"homepage": "."

in package.json according to this doc

Webpack 5 + React Router v6 - Blank Page on Build

I had two issues.

Problem #1: Bad production build testing.

I should have been testing it with a web server. What I ended up using was a globally installed serve package and running serve -s dist. This ended up giving me working routes. The only thing I modified about my TypeScript files was importing Route and Routes from react-router-dom where I was previously importing them from react-router, but I'm not sure if that had any meaningful effect.

So one of the things I made sure to do was add this line into my webpack.prod.js file:

  output: {
    publicPath: '/',
  },

Problem #2: 404 error on routes other than /.

then I was having an issue with my redirects. I needed a _redirects file in my distribution:

/* /index.html 200

I also used the copy-webpack-plugin to move the file from public to dist. This is the snippet for that portion:

  plugins: [
    // ...
    new CopyPlugin({
      patterns: [
        {
          from: 'public/_redirects',
          to: '.',
        },
      ],
    })
  ],

How to fix the white screen after build with create-react-app?

Try changing basename="/" on your BrowserRouter to basename="/React". react-router needs this if used in a sub-directory.

From the react-router docs:

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

Also change homepage in package.json to the url of your production target. homepage="." means it will work on every domain where it is located in the server root (and is also the default behaviour).

From the React docs regarding deployment:

By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json, for example:
"homepage": "http://mywebsite.com/relativepath",
This will let Create React App correctly infer the root path to use in the generated HTML file.

Why Is React Webpack Production Build Showing Blank Page