Whitescreen of death after pulling from git repo (ReactJS, Nginx)

问题

Whenever I perform a git pull from my master branch onto my server, all my React files seem to just disappear and the screen turns white.

The temporary workarounds I had found were:

Delete browser cookies, cache & site history, and then close the browser and try again.
Delete node_modules, npm install all react dependencies again

After a while, the site reappears and everything works as normal until the next time after a few pull requests, the problem appears again.

Any console I use on any browser shows no error messages at all. After 2+ weeks of googling around, I can't seem to find anything that relates to this issue.

Here are my specs:

Ubuntu 16.04 server Framework: React 16.2.0 webpack 1.12 nginx version: nginx/1.10.3 (Ubuntu) git version 2.7.4

My webpack settings (for clarity, I compile all my react files with the command):

node_modules/.bin/webpack --config webpack.local.config.js

(local)

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var config = require('./webpack.base.config.js')

config.devtool = "#eval-source-map"

config.plugins = config.plugins.concat([
    new BundleTracker({
        filename: './webpack-stats-local.json'
    }),
])

config.module.loaders.push({
    test: /\.js[x]?$/,
    exclude: /node_modules/,
    loaders: ['react-hot-loader/webpack', 'babel'],
})

module.exports = config

(base)

var path = require("path")
var webpack = require('webpack')

module.exports = {
    context: __dirname,

    entry: {
        App1: './path/to/App1/',
        App2: './path/to/App2/',
        // ...
        App10: './path/to/App10/',
        vendors: ['react'],
    },

    output: {
        path: path.resolve('./backend/static/bundles/local/'),
        filename: "[name]-[hash].js"
    },

    externals: {
        "gettext":"gettext",
        "django":"django",
        }, // add all vendor libs

    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    ],

    module: {
        loaders: []
    },

    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        extensions: ['', '.js', '.jsx']
    },
}

Any help will be greatly appreciated

回答1:

I solved this problem by updating Webpack to version 4 + updating the dependencies i used while getting rid of the ones i don't use.

来源：https://stackoverflow.com/questions/49189205/whitescreen-of-death-after-pulling-from-git-repo-reactjs-nginx

标签

reactjs

nginx

gitlab

screen