title: Getting webpack hot updating to work correctly in my isomorphic web app
body: <p>I'm creating a webapp with a node/express backend and a react frontend. I got (I think) most of it up and running, but the last step of getting the browser to perform a hot refresh does not work as intended. I'll try to post all the relevant setup here. Please let me know if you require anything else to find out where I have done a mistake:</p>
  
  <p>I start up my application with <code>node ./server/index.js</code></p>
  
  <p><strong>webpack.config.js</strong>
      var path = require('path');
      var webpack = require('webpack');</p>
  
  <pre><code>let webpackConfig = {
      name: 'server',
      output: {
          path: path.join(__dirname, 'dist'),
          filename: 'bundle.js',
          publicPath: '/dist/',
      },
      resolve: {
        extensions: [
          '', '.js', '.jsx', '.json'
        ]
      },
      module: {
          loaders: [
              { 
                  test: /\.(js|jsx)$/,
                  loader: 'babel-loader',
                  exclude: /node_modules/,
                  query:{
                      presets: ['es2015', 'react', 'stage-2']
                  }
              },
              {
                  test:  /\.json$/, 
                  loader: 'json-loader'
              }
          ]
      },
      entry: [
          'webpack-hot-middleware/client',
          './app/client/client.jsx'   
      ],
      plugins: [
          new webpack.DefinePlugin({
              'process.env': {
                  NODE_ENV: JSON.stringify('production')
              }
          }),
          new webpack.optimize.OccurenceOrderPlugin(),
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoErrorsPlugin()
      ]   
  };
  export default webpackConfig;
  </code></pre>
  
  <p><em>index.js</em> just include 'babel-register' and 'server.js'</p>
  
  <p><strong>server/server.js</strong>
      import webpack from 'webpack';
      import webpackConfig from '../webpack.config';
      import webpackDevMiddleware from 'webpack-dev-middleware';
      import webpackHotMiddleware from 'webpack-hot-middleware';</p>
  
  <pre><code>import express from 'express';
  
  const app = express();
  const renderPage = () =&gt; {
      return `
              &lt;!doctype html&gt;
              &lt;html&gt;
              &lt;head&gt;
                  &lt;title&gt;Brewing Day&lt;/title&gt;
                  &lt;meta charset='utf-8'&gt;
              &lt;/head&gt;
              &lt;body&gt;
                  &lt;h1&gt;Hello from server.js!!&lt;/h1&gt;
                  &lt;div id='root'&gt;&lt;/div&gt;
                  &lt;script src='/dist/bundle.js'&gt;&lt;/script&gt;
              &lt;/body&gt;
              &lt;/html&gt;
              `;
  };
  
  const compiler = webpack(webpackConfig);
  app.use(webpackDevMiddleware(compiler, {
      noInfo: true,
      publicPath: webpackConfig.output.publicPath })
  );
  app.use(webpackHotMiddleware(compiler));
  
  app.use((req, res, next) =&gt; {
    res.status(200).end(renderPage());
  });
  
  const server = app.listen(3005, () =&gt; {
      const host = server.address().address;
      const port = server.address().port;
      console.log(`Listening at http://${host}:${port}`);
  })
  
  export default server;
  </code></pre>
  
  <p>And <strong>app/client/client.jsx</strong> that is the entrypoint in the webpack config:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Application from '../components/application.jsx';
  
  window.addEventListener('load', () =&gt; {
      ReactDOM.render(&lt;Application /&gt;, document.getElementById('root')
      );
  });
  </code></pre>
  
  <p>In the console, when I fire it up, it lists the following line:</p>
  
  <pre><code>webpack built cc1194a11614a3ba54a3 in 730ms
  </code></pre>
  
  <p>When I do a change to for example <code>client.jsx</code> or <code>application.jsx</code> that contains the rect component, I get two new lines in my console:</p>
  
  <pre><code>webpack building...
  webpack built 8d340a8853d3cfe9478d in 195ms
  </code></pre>
  
  <p>So far, so good!</p>
  
  <p>However, in the browser, it does not update and gives the following warning in console:</p>
  
  <pre><code>[HMR] The following modules couldn't be hot updated: (Full reload needed)
  This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
  [HMR]  - ./app/components/application.jsx
  </code></pre>
  
  <p>I tried randomly adding <code>module.hot.accept()</code> to <code>application.jsx</code>. That get's rid of the warnings, but still no update without hitting F5 and reloading the browser.</p>
  
  <p>Any idea what I'm missing here? I have seen another example set up almost like mine, where this works without any <code>module.hot.accept()</code> calls anywhere, but I fail to see where my setup differ from the other setup.</p>
  
  <p>Any and all help will be appreciated.</p>