title: Getting "Aborted because 0 is not accepted" and full page reload with react-hot-loader
body: <p>I am trying to set up webpack hot reloading with react-hot-loader. It <em>mostly</em> seems to be working. I am using webpack in an existing rails app.</p>
  
  <p>But it isn't hot-reloading. It is simply triggering a reload every time my react code is changed. The error messages I get are:</p>
  
  <pre><code>[HMR] Cannot apply update. Need to do a full reload! - dev-server.js:18
  [HMR] Error: Aborted because 0 is not accepted - dev-server.js:19
    at hotApply (http://localhost:8080/assets/webpack/bundle.js?body=1:380:31)
    at hotUpdateDownloaded (http://localhost:8080/assets/webpack/bundle.js?body=1:293:13)
    at hotAddUpdateChunk (http://localhost:8080/assets/webpack/bundle.js?body=1:273:13)
    at webpackHotUpdateCallback (http://localhost:8080/assets/webpack/bundle.js?body=1:5:12)
    at http://localhost:8080/assets/webpack0.bd89931b2fa8e2901794.hot-update.js:1:1
  
  Navigated to http://lvh.me:3000/react_page
  </code></pre>
  
  <p>Here is my webpack.hot.config.js settings:</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  
  var config = module.exports = {
  
      // Set 'context' for Rails Asset Pipeline
      context: __dirname,
  
      entry: {
          App: [
              'webpack-dev-server/client?http://localhost:8080/', // WebpackDevServer host and port
              'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
              './app/frontend/javascripts/app.js' // Your appʼs entry point
          ],
          vendor: ['jquery', 'react', 'react-dom', 'react-redux', 'redux','redux-thunk']
      },
  
      devtool: 'inline-source-map',
  
      // Require the webpack and react-hot-loader plugins
      plugins: [
          //new webpack.HotModuleReplacementPlugin(),
          new webpack.optimize.CommonsChunkPlugin(
          {
              name: 'vendor',
              chunks: [''],
              filename: 'vendor.js',
              minChunks: Infinity
          }),
          new webpack.NoErrorsPlugin(),
          new webpack.ProvidePlugin({
              $: 'jquery',
              jQuery: 'jquery',
              'window.jquery': 'jquery'
          })
      ],
      module: {
          loaders: [
              {
                  test: /\.jsx?$/,
                  exclude: /node_modules/,
                  loaders: [
                      'react-hot',
                      'babel?presets[]=es2015&amp;presets[]=react'
                  ],
                  cacheDirectory: true
              }
          ]
      },
      output: {
          path: path.join(__dirname, 'app', 'assets', 'javascripts', 'webpack'), // Save to Rails Asset Pipeline
          filename: 'bundle.js', // Will output App_wp_bundle.js
          publicPath: 'http://localhost:8080/assets/webpack',
  
          //publicPath: 'http://localhost:8080/assets/webpack' // Required for webpack-dev-server
      },
      resolve: {
          extensions: ['', '.js', '.jsx'],
          modulesDirectories: ['node_modules'],
      },
  
  };
  </code></pre>
  
  <p>And I run the code with </p>
  
  <pre><code>webpack-dev-server -d --config webpack.hot.config.js --hot --inline
  </code></pre>
  
  <p>The rails development environment serves the webpack files outside the application asset pipeline via the webpack-dev-server because of the following setting in my development.rb file.</p>
  
  <pre><code>config.action_controller.asset_host = Proc.new { |source|
    if source =~ /webpack\/bundle\.js$/i
      "http://localhost:8080"
    end
  }
  </code></pre>
  
  <p>I have been trying to get this working for hours. Any help would be appreciated. </p>
  
  <p>Thanks guys!</p>