Chunks not being replaced by HotModuleReplacementPlugin :(

Do you want to request a feature or report a bug?

Bug.

What is the current behavior?

Hot module replacement not working with async chunks.

If the current behavior is a bug, please provide the steps to reproduce.

1. Start webpack-dev-server
2. Edit some file in bundle that is being loaded as a chunk
3. Changes are not shown immediately

Webpack.config:

import webpack from 'webpack';

const config = {
  devServer: {
    contentBase: './public',
    historyApiFallback: true,
    inline: true,
  },
  entry: './src/main.jsx',
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          'css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss-loader',
        ],
      },
      {
        test: /((?!modulesOff).{10}|^.{0,9})\.scss$/,
        loaders: [
          'style-loader',
          'css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.modulesOff\.scss$/,
        loaders: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.svg$/,
        loaders: [
          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack-loader?bypassOnDebug',
        ],
      },
      {
        exclude: /node_modules/,
        test: /\.(jsx|js)$/,
        loaders: [
          'babel-loader',
          'eslint-loader?configFile=.eslintrc',
        ],
      },
    ],
  },
  output: {
    publicPath: '/generated/',
    path: './public/generated',
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.scss'],
  },
};

// To build production run: $NODE_ENV='production' webpack
if (process.env.NODE_ENV === 'production') {
  config.plugins = [
    new webpack.optimize.UglifyJsPlugin({ minimize: true }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify('production') },
    }),
  ];
}

module.exports = config;

Router:

const isDeveloping = process.env.NODE_ENV !== 'production';

// When I do this HMR works in develop but chunks are not working
if (isDeveloping) {
  require('components/pages/Home');
  require('components/pages/About');
  require('components/pages/NotFound');

  require('modules/counter/containers');
  require('modules/blog/containers');
}

// This might be a problem for HMR because it is a promise and webpack-dev-server
// caches the result? I go to home -> home gets required -> I edit home component -> home does 
// not get replaced because it is cached?
const loadRoute = cb => module => cb(null, module.default);
const errorLoading = err => console.error('Dynamic loading failed' + err);

// These are my routes
const RouterApp = props => (
  <ApolloProvider {...props} store={store} client={client}>
    <Router history={ history }>
      <Route path={ '/' } component={ App }>
        <IndexRoute
          getComponent={
            (location, cb) => {
              System.import('components/pages/Home')
                .then(loadRoute(cb))
                .catch(err => errorLoading(err));
            }
          }
        />
        <Route
          path={ '/counter' }
          getComponent={
            (location, cb) => {
              System.import('modules/counter/containers')
                .then(loadRoute(cb))
                .catch(err => errorLoading(err));
            }
          }
        />
        <Route
          path={ '/todos' }
          getComponent={
            (location, cb) => {
              System.import('modules/blog/containers')
                .then(loadRoute(cb))
                .catch(err => errorLoading(err));
            }
          }
        />
        <Route
          path={ '/about' }
          getComponent={
            (location, cb) => {
              System.import('components/pages/About')
                .then(loadRoute(cb))
                .catch(err => errorLoading(err));
            }
          }
        />
        <Route
          path="*"
          getComponent={
            (location, cb) => {
              System.import('components/pages/NotFound')
                .then(loadRoute(cb))
                .catch(err => errorLoading(err));
            }
          }
        />
      </Route>
    </Router>
  </ApolloProvider>
);

export default RouterApp;

What is the expected behavior?

1. Start webpack-dev-server
2. Edit some file in bundle that is being loaded as a chunk
3. Changes show immediately

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

"react-hot-loader": "^3.0.0-beta.6",
"webpack": "^2.1.0-beta.25",
"webpack-dev-server": "^2.1.0-beta.0"