title: Webpack 2 + React Hot Loader Not Working
body: <p>I'm trying to get Webpack 2 + React Hot Loader working but it doesn't seem to hot reload. It renders the webpage correctly but anytime I make any changes to the "App.js" file, it doesn't do anything.</p>
  
  <p><strong>webpack.config.json</strong></p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  module.exports = {
    entry: {
      'app': [
        'react-hot-loader/patch',
        path.join(__dirname, 'src/main.js')
      ]
    },
    output: {
      path: path.join(__dirname, 'build'),
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        }
      ]
    }
  };
  </code></pre>
  
  <p><strong>.babelrc</strong></p>
  
  <pre><code>{
    "presets": [
      ["env", {"modules": false}],
      "react"
    ],
    "plugins": [
      "transform-object-rest-spread"
    ]
  }
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "main": "main.js",
    "scripts": {
      "dev": "webpack-dev-server --inline --hot"
    },
    "dependencies": {
      "express": "^4.15.2",
      "react": "^15.5.4",
      "react-dom": "^15.5.4"
    },
    "devDependencies": {
      "babel-core": "^6.24.1",
      "babel-loader": "^7.0.0",
      "babel-plugin-transform-object-rest-spread": "^6.23.0",
      "babel-polyfill": "^6.23.0",
      "babel-preset-env": "^1.4.0",
      "babel-preset-react": "^6.24.1",
      "react-hot-loader": "next",
      "webpack": "^2.4.1",
      "webpack-dev-server": "^2.4.4"
    }
  }
  </code></pre>
  
  <p>I'm running webpack-dev-server through the CLI with the --hot and --inline flags.</p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import { AppContainer } from 'react-hot-loader'
  
  import App from './containers/App'
  
  const render = Component =&gt; {
    ReactDOM.render(
      &lt;AppContainer&gt;
        &lt;Component /&gt;
      &lt;/AppContainer&gt;,
      document.getElementById('root')
    )
  }
  
  render(App)
  
  if(module.hot) {
      module.hot.accept();
  }
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  
  export default class App extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;div className="container"&gt;
            &lt;h1&gt;Testing&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>So to test it out, I'll run <code>yarn dev</code> and the server will start. Everything compiles and webpack will output <code>webpack: Compiled sucessfully</code>. However, any changes made to App.js will not reload the webpage. The console on the webpage itself only outputs this:</p>
  
  <pre><code>[HMR] Waiting for update signal from WDS...
  bundle.js:15580 [WDS] Hot Module Replacement enabled.
  </code></pre>
  
  <p>I tried various methods listed here (<a href="https://github.com/webpack/webpack-dev-server/issues/100" rel="nofollow noreferrer">https://github.com/webpack/webpack-dev-server/issues/100</a>) but none of them seemed to work.</p>