React production shows blank page

react blank page no errors
create-react-app blank screen
react webpack production blank page
react giving blank screen
github pages react app blank
react github pages blank page
react localhost blank page
netlify blank page

i have a problem with a webpack build, the command i run is

cross-env NODE_ENV=production webpack --config webpack.prod.js

and the file webpack prod is:

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var path = require('path');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
  devtool: 'source-map',

  output: {
    path: path.join(process.cwd(), '/public'),
    publicPath: '/',
    filename: '[name].[hash].js'
},

plugins: [
    //new webpack.NoErrorsPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
        mangle: {
            keep_fnames: true,
            except: ['$super']
        }
    }),
    new ExtractTextPlugin('[name].[hash].css'),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    })
  ]
});

webpack.common.js is

var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var pkgBower = require('./package.json');

module.exports = {

entry: {
  'app': './main.js'
},

resolve: {
  root: path.join(__dirname, ''),
  modulesDirectories: ['node_modules', 'bower_components'],
  extensions: ['', '.js', '.jsx']
},

module: {
  loaders: [...]
},

devServer: {
  outputPath: path.join(__dirname, 'public')
},

plugins: [
  new HtmlWebpackPlugin({
      template: process.env.NODE_ENV == 'development' ? 'index.html' : 'index.prod.html',
      baseUrl: process.env.NODE_ENV == 'development' ? '/' : '/'
  })      
  ]
};

i can run the build but unfortunatelly when i open index.html it shows a blank page to me, i want to include this SPA in a spring boot project but I do not know how ;)

Thanks!

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?

How to fix the Whitescreen After a Static Deployment with create , it is to stare at a blank screen after you deployed a static React app? app: After all that work, you finally deployed your app for production. Debugger shows that, there is a problem with running "provider" transpiled by babel. (blank white screen for production build), Could it be related to react

First things first, which version of webpack are you using Lorenzo? Probably due to syntax, it's 1.X.

First, check in your package.json file which version is. Then, if it's really 1.x you can build in debug mode.

export default {
    entry: [
        './src/Client.js'
    ],
    debug: true
}

Inside your webpack.common.js

Check the error, paste here.

I hope it helps, welcome to StackOverflow, here are a few notes that can improve our community =)

Reactjs Showing a blank page after build / production static pages , Reactjs Showing a blank page after build / production static pages Solution. Hello guys I have had this issue for a long ass time when I started learning react and  React production shows blank page. i open index.html it shows a blank page to me, i want to include this SPA in a spring boot project but I do not know how

Try to put "main":"index.js" in package.json file That solved my problem.

  "main": "index.js",

  "scripts": {
    ...
  },

Happy to help.

Development page blank on first load · Issue #5809 · facebook , GitHub is home to over 40 million developers working together to host and To create a production bundle, use `npm run build` or `yarn build`. The Page comes up blank and react-dev-tools (chrome extension) says this  It’s one of the most annoying situations after deploying a static React app: After all that work, you finally deployed your app for production. But as you visit the site – instead of your freshly deployed app – you see … nothing. A blank, white, screen. The reason for this could be practically everything.

Unable to Render the App in the Server , Shows blank screen , Hi , I am using create-react-app for my react app . Unable to Render the App in the Server , Shows blank screen . Seeing it locally eliminates possibility this is nginx (which we're using in staging and production) or express  Create React App. Deployment. npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.

Blank page when deploying a react projec , no errors, build settings , That is my second time trying to start and deploy this project, and both times I get the same issue, but before I had errors being raised, now I only get a blank  This is where create-react-app, which is a tool released by Facebook, really helps. It can help in setting up a new React project within minutes. This tool wraps up all the common dependencies so that a developer does not have to worry about the configuration stuff and can, instead, just focus on developing React code itself.

React app showing blank page, 27 Apr 2018 Speed up your React app · Improve SEO · Avoid Blank Page flickering for Making Production Ready Server-Side Rendering React Apps. You can't  Create React App . Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Comments
  • Hi Yuri, i am using the version 1.14
  • enable debug mode then.
  • I changed my webpack.common like this module.exports = { entry: { 'app': './main.js', }, debug:true, } And i did not catch any error