Hot update not update the view (screen)

[rottmann]

I wrote a little react app and serve static files from a separate express server (to redirect all sub-pathes to index.html [react-router]).

static server on port 8080
webpack hot dev server on port 8081

Browser console log:

[HMR] Waiting for update signal from WDS...
client:14 [WDS] Hot Module Replacement enabled.

after modify and save a file (e.g. router.js)

client:18 [WDS] App updated. Recompiling...
client:60 [WDS] App hot update...
dev-server.js:54 [HMR] Checking for updates on the server...
dev-server.js:34 [HMR] Updated modules:
dev-server.js:36 [HMR]  - 11
dev-server.js:40 [HMR] App is up to date.

But on the screen nothing change

The cli console log show:

Hash: a00a156bb0c50980187c
Version: webpack 1.5.3
Time: 483ms
                               Asset     Size  Chunks             Chunk Names
                              app.js   130429       0  [emitted]  app
                           vendor.js  1854993       1  [emitted]  vendor
0.919fa51221ca3cdacfb2.hot-update.js     3980       0  [emitted]  app
919fa51221ca3cdacfb2.hot-update.json       36          [emitted]  
chunk    {0} app.js, 0.919fa51221ca3cdacfb2.hot-update.js (app) 117673 {1} [rendered]
    [0] multi app 52 {0}
    [1] (webpack)-dev-server/client?http://localhost:8081 1674 {0}
    [2] ./src/app.js 2597 {0} [1 error]
    [4] (webpack)/hot/dev-server.js 2916 {0}
   [11] ./src/router.js 3370 {0} [built]
   [34] (webpack)-dev-server/client/web_modules/socket.io/index.js 1149 {0}
   [89] (webpack)-dev-server/client/web_modules/socket.io/socket.io.js 105915 {0}
chunk    {1} vendor.js (vendor) 1601853 [rendered]
    [0] multi vendor 76 {1}
.
.
.
  [257] ./~/react/lib/toArray.js 3176 {1} [built]
webpack: bundle is now VALID.

Structure

|- build/
|- dev/
   |- webpack.base.js
   |- dev-server.js
|- src/
   |- app.js
   |- router.js
|- static/
   |- index.html
   |- assets/
      |- ...some files...

package.json

  "dependencies": {
    "react": "^0.12.2",
    "react-router": "^0.11.4"
  },
  "devDependencies": {
    "express": "^4.11.1",
    "jsx-loader": "^0.12.2",
    "react-hot-loader": "^1.1.1",
    "webpack": "^1.5.3",
    "webpack-dev-server": "^1.7.0"
  }

webpack.base.js

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

var vendorLibs = [
    'react',
    'react-router'
];

module.exports = function(options) {
    return {
        context: path.join(__dirname, '../', 'src'),
        entry: {
            app   : [
                'webpack-dev-server/client?http://localhost:8081',
                'webpack/hot/dev-server',
                './app.js'
            ],
            vendor: vendorLibs,
        },
        output: {
            path             : path.join(__dirname, '../', 'build'),
            filename         : '[name].js',
            chunkFilename    : '[id].bundle.js',
            sourceMapFilename: '[file].map',
            pathinfo         : true,
            publicPath       : 'http://localhost:8081/'
        },
        module: {
            loaders: [
                { test: /\.js$/, loaders: ['react-hot', 'jsx?harmony'] }
            ]
        },
        resolve: {
            extensions: ['', '.js']
        },
        debug: options.debug,
        devtool: options.devtool,
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: Infinity }),
            new webpack.HotModuleReplacementPlugin()
        ]
    }
};

dev-server-js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var express = require('express');
var path = require('path');
var fs = require('fs');

var app = express();
var config = require('./webpack.base.js')

// Redirect all non existing files to index.html
app.get('/*', function(req, res) {
    var filename = path.join(__dirname, '../', 'static', req.url);
    if (fs.existsSync(filename)) {
        console.log('static: ' + req.url);
        res.sendFile(filename);
    } else {
        console.log('static: index.html (' + req.url + ')');
        res.sendFile(path.join(__dirname, '../', 'static') + '/index.html');
    }
});

var compiler = webpack(config({
    devServer    : true,
    devtool      : 'eval',
    debug        : true
}));

var server = new WebpackDevServer(compiler, {
    contentBase: 'http://localhost:8081',
    hot: true,
    quiet: false,
    noInfo: false,
    lazy: false,
    watchDelay: 300,
    publicPath: 'http://localhost:8081/',
    stats: { colors: true },
});

server.listen(8081, 'localhost', function() {});
app.listen(8080);

app.js

<!DOCTYPE html>
<html>
<body>
    <div id="app"></div>
    <script src="http://localhost:8081/vendor.js"></script>
    <script src="http://localhost:8081/app.js"></script>
</body>
</html>

Is it a problem when serving the index.html from an other port?
The docs say it is possible (http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server)

[sokra]

The react-hot-loader only works for React components. Is route.js a React component?

[rottmann]

Yes it is the react-router with a sample react component.

[rottmann]

I test it before on one port with a webpack dev only server, and it worked, then splitted it into 2 servers and got the problem.

Or is it possible to redirect router paths to index.html with webpack-dev-server?
e.g. for a direct call of http://localhost:8080/some/path/4711

[sokra]

The log looks pretty good... It does't look like a connection/configuration issue.

cc @gaearon

[gaearon]

Can you put up a reproducible example in a repo so I could examine it?

[rottmann]

Funny, i create an example with the code above, everything worked.
Then i try my project again and it worked too.

Hope it was the update of chrome that solved the problem and it is no other strange problem.

[rottmann]

Reopened the problem.

I try my app at my office computer and got the problem.

At home i run Win7 Host with a VirtualBox Mint 17 and it worked without a problem in the box.
In the office i use a native Mint 17 with the same chrome (synced with the same plugins)... the browser not update the view.

Did somebody have an idea how i can determine the problem?

[gaearon]

Any change you have duplicate react in node_modules?
For example, some other library may have it in its own node_modules..

[rottmann]

  "dependencies": {
    "react": "^0.12.2",
    "react-router": "^0.11.6"
  },
  "devDependencies": {
    "express": "^4.11.1",
    "jsx-loader": "^0.12.2",
    "react-hot-loader": "^1.1.3",
    "webpack": "^1.5.3",
    "webpack-dev-server": "^1.7.0"
  }

cleaned node_modules dir and install all modules new.

[gaearon]

Does https://github.com/gaearon/react-hot-boilerplate work on that computer?

[rottmann]

Thanks, found the problem: apparmor blocked something on port 8080. (previously i run a docker project and uninstalled docker)

Funny problem, script compilation run and browser message for reload appears, only the browser view not update thats why it was not obvious what was not working.

[gaearon]

Good, thank you for sharing!