Mixing
ReactJS Reloading returns a blank page
up vote
1
down vote
favorite
I am currently developing a ReactJS app and I use hot-reloading. Whenever i re-compile the application, it will throw me a blank page and I would need to go back to the base url for the UI to be rendered. Here is my webpack config:
'use strict';
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'development';
const commonConfig = {
resolve: {
modules: [path.resolve('./src'), 'node_modules'],
extensions: ['.js', '.csv', '.json', '.scss', '.css', '.html']
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
enforce: 'pre',
use: [{ loader: 'eslint-loader', options: { configFile: '.eslintrc' } }]
},
{
use: 'babel-loader',
test: /.js$/,
exclude: /node_modules/
},
{
test: /.html$/,
use: [{ loader: 'htmlhint-loader', options: { configFile: '.htmlhintrc' } }],
exclude: /node_modules/,
enforce: 'pre'
},
{
test: /.(png|jpg|jpeg|svg|gif|svg|woff|woff2|ttf|eot)(?v=d+.d+.d+)?$/,
use: 'file-loader'
},
{
use: [{
loader: 'html-loader'
}],
test: /.html$/
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
if (module.resource && (/^.*.(css|less|scss)$/).test(module.resource)) {
return false;
}
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
new CopyWebpackPlugin([{
from: __dirname + '/src/images',
to: ''
}]),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: 'dependency'
}),
new webpack.optimize.ModuleConcatenationPlugin()
]
};
const devConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'react-hot-loader/patch', 'index.js',
'webpack-hot-middleware/client?reload=true']
},
target: 'web',
devtool: 'inline-source-map',
output: {
path: path.join(__dirname, '/build'),
filename: '[name].bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /.scss/,
include: path.resolve(__dirname, 'src/styles'),
use: ['style-loader', 'css-loader', {loader: 'sass-loader', options: {sourceMap: true}}]
},
{
test: /.css$/,
exclude: [/node_modules/],
use: ['style-loader', 'css-loader?modules']
},
{
test: /.css$/,
include: [/node_modules/],
use: ['style-loader', 'css-loader']
}
]
},
devServer: {
contentBase: 'src',
compress: true,
hot: true,
port: 3xxx,
host: '0.0.0.0',
disableHostCheck: true,
historyApiFallback: {
disableDotRule: true,
index: 'build/index.html'
},
stats: 'minimal',
overlay: true,
proxy: {
'/api/**': {
target: {
port: 8xxx
},
secure: false
},
'/actuator/**': {
target: {
port: 8xxx
},
secure: false
},
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
};
const prodConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'index.js']
},
devtool: 'source-map',
output: {
path: path.join(__dirname, '/build'),
filename: '[name].[hash].bundle.js',
publicPath: '/myModule/'
},
module: {
rules: [
{
test: /.scss/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{loader: 'sass-loader', options: {sourceMap: true}}
]
})
},
{
test: /.css$/,
exclude: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?modules'
})
},
{
test: /.css$/,
include: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin({filename: '[name].[hash].css'}),
new webpack.NoEmitOnErrorsPlugin()
]
};
const drConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'index.js']
},
devtool: 'source-map',
output: {
path: path.join(__dirname, '/dr_build'),
filename: '[name].[hash].bundle.js',
publicPath: '/myModule/'
},
module: {
rules: [
{
test: /.scss/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{loader: 'sass-loader', options: {sourceMap: true}}
]
})
},
{
test: /.css$/,
exclude: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?modules'
})
},
{
test: /.css$/,
include: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin({filename: '[name].[hash].css'}),
new webpack.NoEmitOnErrorsPlugin()
]
};
let config;
switch (nodeEnv) {
case 'production':
console.info('NODE_ENV: production');
config = merge(commonConfig, prodConfig);
break;
case 'dr':
console.info('NODE_ENV: dr');
config = merge(commonConfig, drConfig);
break;
default:
console.info('NODE_ENV: development');
config = merge(commonConfig, devConfig);
break;
}
module.exports = config;
I am not sure what I am missing or what else can be added or removed from my webpack. I use React-router-v4.
Thanks
reactjs webpack react-router-v4
asked yesterday
AKJ
769
add a comment |
up vote
1
down vote
favorite
I am currently developing a ReactJS app and I use hot-reloading. Whenever i re-compile the application, it will throw me a blank page and I would need to go back to the base url for the UI to be rendered. Here is my webpack config:
'use strict';
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'development';
const commonConfig = {
resolve: {
modules: [path.resolve('./src'), 'node_modules'],
extensions: ['.js', '.csv', '.json', '.scss', '.css', '.html']
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
enforce: 'pre',
use: [{ loader: 'eslint-loader', options: { configFile: '.eslintrc' } }]
},
{
use: 'babel-loader',
test: /.js$/,
exclude: /node_modules/
},
{
test: /.html$/,
use: [{ loader: 'htmlhint-loader', options: { configFile: '.htmlhintrc' } }],
exclude: /node_modules/,
enforce: 'pre'
},
{
test: /.(png|jpg|jpeg|svg|gif|svg|woff|woff2|ttf|eot)(?v=d+.d+.d+)?$/,
use: 'file-loader'
},
{
use: [{
loader: 'html-loader'
}],
test: /.html$/
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
if (module.resource && (/^.*.(css|less|scss)$/).test(module.resource)) {
return false;
}
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
new CopyWebpackPlugin([{
from: __dirname + '/src/images',
to: ''
}]),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: 'dependency'
}),
new webpack.optimize.ModuleConcatenationPlugin()
]
};
const devConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'react-hot-loader/patch', 'index.js',
'webpack-hot-middleware/client?reload=true']
},
target: 'web',
devtool: 'inline-source-map',
output: {
path: path.join(__dirname, '/build'),
filename: '[name].bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /.scss/,
include: path.resolve(__dirname, 'src/styles'),
use: ['style-loader', 'css-loader', {loader: 'sass-loader', options: {sourceMap: true}}]
},
{
test: /.css$/,
exclude: [/node_modules/],
use: ['style-loader', 'css-loader?modules']
},
{
test: /.css$/,
include: [/node_modules/],
use: ['style-loader', 'css-loader']
}
]
},
devServer: {
contentBase: 'src',
compress: true,
hot: true,
port: 3xxx,
host: '0.0.0.0',
disableHostCheck: true,
historyApiFallback: {
disableDotRule: true,
index: 'build/index.html'
},
stats: 'minimal',
overlay: true,
proxy: {
'/api/**': {
target: {
port: 8xxx
},
secure: false
},
'/actuator/**': {
target: {
port: 8xxx
},
secure: false
},
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
};
const prodConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'index.js']
},
devtool: 'source-map',
output: {
path: path.join(__dirname, '/build'),
filename: '[name].[hash].bundle.js',
publicPath: '/myModule/'
},
module: {
rules: [
{
test: /.scss/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{loader: 'sass-loader', options: {sourceMap: true}}
]
})
},
{
test: /.css$/,
exclude: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?modules'
})
},
{
test: /.css$/,
include: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin({filename: '[name].[hash].css'}),
new webpack.NoEmitOnErrorsPlugin()
]
};
const drConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'index.js']
},
devtool: 'source-map',
output: {
path: path.join(__dirname, '/dr_build'),
filename: '[name].[hash].bundle.js',
publicPath: '/myModule/'
},
module: {
rules: [
{
test: /.scss/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{loader: 'sass-loader', options: {sourceMap: true}}
]
})
},
{
test: /.css$/,
exclude: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?modules'
})
},
{
test: /.css$/,
include: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin({filename: '[name].[hash].css'}),
new webpack.NoEmitOnErrorsPlugin()
]
};
let config;
switch (nodeEnv) {
case 'production':
console.info('NODE_ENV: production');
config = merge(commonConfig, prodConfig);
break;
case 'dr':
console.info('NODE_ENV: dr');
config = merge(commonConfig, drConfig);
break;
default:
console.info('NODE_ENV: development');
config = merge(commonConfig, devConfig);
break;
}
module.exports = config;
I am not sure what I am missing or what else can be added or removed from my webpack. I use React-router-v4.
Thanks
reactjs webpack react-router-v4
asked yesterday
AKJ
769
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I am currently developing a ReactJS app and I use hot-reloading. Whenever i re-compile the application, it will throw me a blank page and I would need to go back to the base url for the UI to be rendered. Here is my webpack config:
'use strict';
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'development';
const commonConfig = {
resolve: {
modules: [path.resolve('./src'), 'node_modules'],
extensions: ['.js', '.csv', '.json', '.scss', '.css', '.html']
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
enforce: 'pre',
use: [{ loader: 'eslint-loader', options: { configFile: '.eslintrc' } }]
},
{
use: 'babel-loader',
test: /.js$/,
exclude: /node_modules/
},
{
test: /.html$/,
use: [{ loader: 'htmlhint-loader', options: { configFile: '.htmlhintrc' } }],
exclude: /node_modules/,
enforce: 'pre'
},
{
test: /.(png|jpg|jpeg|svg|gif|svg|woff|woff2|ttf|eot)(?v=d+.d+.d+)?$/,
use: 'file-loader'
},
{
use: [{
loader: 'html-loader'
}],
test: /.html$/
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
if (module.resource && (/^.*.(css|less|scss)$/).test(module.resource)) {
return false;
}
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
new CopyWebpackPlugin([{
from: __dirname + '/src/images',
to: ''
}]),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: 'dependency'
}),
new webpack.optimize.ModuleConcatenationPlugin()
]
};
const devConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'react-hot-loader/patch', 'index.js',
'webpack-hot-middleware/client?reload=true']
},
target: 'web',
devtool: 'inline-source-map',
output: {
path: path.join(__dirname, '/build'),
filename: '[name].bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /.scss/,
include: path.resolve(__dirname, 'src/styles'),
use: ['style-loader', 'css-loader', {loader: 'sass-loader', options: {sourceMap: true}}]
},
{
test: /.css$/,
exclude: [/node_modules/],
use: ['style-loader', 'css-loader?modules']
},
{
test: /.css$/,
include: [/node_modules/],
use: ['style-loader', 'css-loader']
}
]
},
devServer: {
contentBase: 'src',
compress: true,
hot: true,
port: 3xxx,
host: '0.0.0.0',
disableHostCheck: true,
historyApiFallback: {
disableDotRule: true,
index: 'build/index.html'
},
stats: 'minimal',
overlay: true,
proxy: {
'/api/**': {
target: {
port: 8xxx
},
secure: false
},
'/actuator/**': {
target: {
port: 8xxx
},
secure: false
},
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
};
const prodConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'index.js']
},
devtool: 'source-map',
output: {
path: path.join(__dirname, '/build'),
filename: '[name].[hash].bundle.js',
publicPath: '/myModule/'
},
module: {
rules: [
{
test: /.scss/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{loader: 'sass-loader', options: {sourceMap: true}}
]
})
},
{
test: /.css$/,
exclude: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?modules'
})
},
{
test: /.css$/,
include: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin({filename: '[name].[hash].css'}),
new webpack.NoEmitOnErrorsPlugin()
]
};
const drConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'index.js']
},
devtool: 'source-map',
output: {
path: path.join(__dirname, '/dr_build'),
filename: '[name].[hash].bundle.js',
publicPath: '/myModule/'
},
module: {
rules: [
{
test: /.scss/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{loader: 'sass-loader', options: {sourceMap: true}}
]
})
},
{
test: /.css$/,
exclude: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?modules'
})
},
{
test: /.css$/,
include: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin({filename: '[name].[hash].css'}),
new webpack.NoEmitOnErrorsPlugin()
]
};
let config;
switch (nodeEnv) {
case 'production':
console.info('NODE_ENV: production');
config = merge(commonConfig, prodConfig);
break;
case 'dr':
console.info('NODE_ENV: dr');
config = merge(commonConfig, drConfig);
break;
default:
console.info('NODE_ENV: development');
config = merge(commonConfig, devConfig);
break;
}
module.exports = config;
I am not sure what I am missing or what else can be added or removed from my webpack. I use React-router-v4.
Thanks
reactjs webpack react-router-v4
asked yesterday
AKJ
769
I am currently developing a ReactJS app and I use hot-reloading. Whenever i re-compile the application, it will throw me a blank page and I would need to go back to the base url for the UI to be rendered. Here is my webpack config:
'use strict';
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'development';
const commonConfig = {
resolve: {
modules: [path.resolve('./src'), 'node_modules'],
extensions: ['.js', '.csv', '.json', '.scss', '.css', '.html']
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
enforce: 'pre',
use: [{ loader: 'eslint-loader', options: { configFile: '.eslintrc' } }]
},
{
use: 'babel-loader',
test: /.js$/,
exclude: /node_modules/
},
{
test: /.html$/,
use: [{ loader: 'htmlhint-loader', options: { configFile: '.htmlhintrc' } }],
exclude: /node_modules/,
enforce: 'pre'
},
{
test: /.(png|jpg|jpeg|svg|gif|svg|woff|woff2|ttf|eot)(?v=d+.d+.d+)?$/,
use: 'file-loader'
},
{
use: [{
loader: 'html-loader'
}],
test: /.html$/
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
if (module.resource && (/^.*.(css|less|scss)$/).test(module.resource)) {
return false;
}
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
new CopyWebpackPlugin([{
from: __dirname + '/src/images',
to: ''
}]),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: 'dependency'
}),
new webpack.optimize.ModuleConcatenationPlugin()
]
};
const devConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'react-hot-loader/patch', 'index.js',
'webpack-hot-middleware/client?reload=true']
},
target: 'web',
devtool: 'inline-source-map',
output: {
path: path.join(__dirname, '/build'),
filename: '[name].bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /.scss/,
include: path.resolve(__dirname, 'src/styles'),
use: ['style-loader', 'css-loader', {loader: 'sass-loader', options: {sourceMap: true}}]
},
{
test: /.css$/,
exclude: [/node_modules/],
use: ['style-loader', 'css-loader?modules']
},
{
test: /.css$/,
include: [/node_modules/],
use: ['style-loader', 'css-loader']
}
]
},
devServer: {
contentBase: 'src',
compress: true,
hot: true,
port: 3xxx,
host: '0.0.0.0',
disableHostCheck: true,
historyApiFallback: {
disableDotRule: true,
index: 'build/index.html'
},
stats: 'minimal',
overlay: true,
proxy: {
'/api/**': {
target: {
port: 8xxx
},
secure: false
},
'/actuator/**': {
target: {
port: 8xxx
},
secure: false
},
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
};
const prodConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'index.js']
},
devtool: 'source-map',
output: {
path: path.join(__dirname, '/build'),
filename: '[name].[hash].bundle.js',
publicPath: '/myModule/'
},
module: {
rules: [
{
test: /.scss/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{loader: 'sass-loader', options: {sourceMap: true}}
]
})
},
{
test: /.css$/,
exclude: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?modules'
})
},
{
test: /.css$/,
include: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin({filename: '[name].[hash].css'}),
new webpack.NoEmitOnErrorsPlugin()
]
};
const drConfig = {
entry: {
main: ['whatwg-fetch', 'core-js/es6', 'index.js']
},
devtool: 'source-map',
output: {
path: path.join(__dirname, '/dr_build'),
filename: '[name].[hash].bundle.js',
publicPath: '/myModule/'
},
module: {
rules: [
{
test: /.scss/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{loader: 'sass-loader', options: {sourceMap: true}}
]
})
},
{
test: /.css$/,
exclude: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?modules'
})
},
{
test: /.css$/,
include: [/node_modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin({filename: '[name].[hash].css'}),
new webpack.NoEmitOnErrorsPlugin()
]
};
let config;
switch (nodeEnv) {
case 'production':
console.info('NODE_ENV: production');
config = merge(commonConfig, prodConfig);
break;
case 'dr':
console.info('NODE_ENV: dr');
config = merge(commonConfig, drConfig);
break;
default:
console.info('NODE_ENV: development');
config = merge(commonConfig, devConfig);
break;
}
module.exports = config;
I am not sure what I am missing or what else can be added or removed from my webpack. I use React-router-v4.
Thanks
reactjs webpack react-router-v4
reactjs webpack react-router-v4
asked yesterday
AKJ
769
asked yesterday
AKJ
769
asked yesterday
AKJ
769
asked yesterday
AKJ
769
asked yesterday
AKJ
769
769
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372252%2freactjs-reloading-returns-a-blank-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
