React Hot Loader not updating as expected

Question

I am using react-hot-loader and webpack. I also use webpack-dev-server together with an express backend.

This is my relevant webpack config for development:

var frontendConfig = config({
  entry: [
    './src/client/app.js',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/dev-server'
  ],
  output: {
    path: targetDir,
    publicPath: PROD ? '/build/assets/' : 'http://localhost:3000/build/assets/' ,
    filename: 'app.js'
  },
  module: {
    loaders: [
      {test: /\.js$/,
       exclude: /node_modules/,
       loaders: PROD ? [babelLoader] : ['react-hot', babelLoader] }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin({ quiet: true })
  ]
});

with this config I start webpack and webpack-dev-server

gulp.task('frontend-watch', function() {
    new WebpackDevServer(webpack(frontendConfig), {
      publicPath: frontendConfig.output.publicPath,
      hot: true,
      stats: { colors: true }
    }).listen(3000, 'localhost', function (err, result) {
      if(err) {
        console.log(err);
      }
      else {
        console.log('webpack dev server listening at localhost:3000');
      }
    });
});

so webpack-dev-server is running at localhost:3000 and receives app.js from webpack watcher (which now is not anymore written to file system).

my express server serves as a backend/api and has the following config:

var express = require('express');

// proxy for react-hot-loader in dev mode
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({
  changeOrigin: true,
  ws: true
});

var isProduction = process.env.NODE_ENV === 'production';

// It is important to catch any errors from the proxy or the
// server will crash. An example of this is connecting to the
// server when webpack is bundling
proxy.on('error', function(e) {
  console.log('Could not connect to proxy, please try again...');
});

module.exports = function (app) {

    // We only want to run the workflow when not in production
  if (!isProduction) {
    console.log('setting up proxy for webpack-dev-server..');
    // Any requests to localhost:4200/build is proxied
    // to webpack-dev-server
    app.all('assets/app.js', function (req, res) {

      proxy.web(req, res, {
          target: 'http://localhost:3000'
      });
      console.log('request proxied to webpack-dev!');
    });
  }

  var server = require('http').createServer(app);

  app.use(express.static(homeDirectory + '/build'));
  app.use(express.static(homeDirectory + '/files'));

  server.listen(4200);
};

That's all good so far, the proxying work for app.js and I see successfull hot update messages in the browser console:

Now, while it looks fine it does not work as I expected:

1. when I change a component's render() method it updates as supposed, but when I change a helper method (that is used in render()) then I don't get any hot update. is that normal?

2. Another thing that bugs me, if I work like this, and do a 'hard' browser reload at some point, all changes I made are reverted to the point where I started my webpack-dev-server - all the hot updates in between have not been persisted somehow. is that normal as well? I would expect that I loose my state but not any changes I made to the code in the meantime. That has probably something to with my app.js not being written to the file system.

Answer 1

For your question #2, that's not normal, I have a template repo that has HMR working available here and it works just fine https://github.com/briandipalma/wp-r-template

Answer 2

For question #1, usually render methods display or format data, not grab it from somewhere. But if you need to format data, use a function outside of the component

Parent component would call the following once you retrieve the price

<ChildComponent price={this.state.price}

ChildComponent's render function would use props (or better yet a parameter of the function). Remember: the whole point of React is composition and data flow

return (
   <div>{this.props.price}</div>
  );