I'm having a bit of trouble getting the react-hot webpack loader to work correctly.

When I load the page I get the following as I would expect:

[HMR] Waiting for update signal from WDS...

[WDS] Hot Module Replacement enabled.

But when I save a change the page automatically hard refreshes the browser (rather than a HMR replacement).

//webpack.config.js



 {

  entry: {

    client: 'webpack-dev-server/client?http://localhost:8786', // WebpackDevServer host and port

    app: ./HelloWorld.tsx

  },

  devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map',

  output: {

        path: path.join(__dirname, 'dist'),

        filename: '[name].entry.js'

  },

  module: {

    loaders: [

      {

        test: /.ts(x?)$/,

        loaders: ['react-hot', 'babel-loader?cacheDirectory=true,presets[]=es2015,presets[]=react', 'ts-loader']

      }

    ]

  },

    devServer: {

        contentBase: ./dist,

    port:8786

    },

    plugins: [

        new webpack.NoErrorsPlugin()

    ]

}

command: webpack-dev-server --hot --inline

on an interesting sidenote if I use babel-preset-react-hmre everything works as expected. (However I don't really want to use this as it seems less supported than the proper react-hot loader).