Cannot find update. Need to do a full reload! in webpack

Question

This is my file webpack.config.js . Although I added ['react-hot' ,'babel']. But can resolve it.

var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.resolve(__dirname, 'client/');
var devFlagPlugin = new webpack.DefinePlugin({
    __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'true'))
});

var config = {
    cache: true,
    devtool: 'eval', // 'source-map', 'eval'
    entry: [
        'webpack-dev-server/client?http://localhost:3000/',
        'webpack/hot/only-dev-server',
        './client/app.jsx'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/static/'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                include: path.join(__dirname, 'client'),
                exclude: /node_modules/,
                loader: ['react-hot' ,'babel'],
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            },
            {
                test: /\.(jpe?g|png|gif|jpg|svg)$/i,
                loaders: [
                    'file?images/hash=sha512&digest=hex&name=../build/img/[hash].[ext]',
                    'image-webpack?{optimizationLevel: 9, interlaced: false, pngquant:{quality: "65-90", speed: 4}, mozjpeg: {quality: 65}}'
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=../build/fonts/[name].[ext]'
            }
        ]
    },
    sassLoader: {
        includePaths: [path.resolve(__dirname, "./client/assets/css/")]
    },

    plugins: [
        devFlagPlugin,
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: true
            },
            output: {
                comments: true,
            }
        }), 
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]

}

module.exports = config;

Answer 1

I believe your problem is you need to use babel-preset-react-hmre in order for it to work properly. More info here here. For example

 {
    test: /\.jsx?$/,
    include: path.join(__dirname, 'client'),
    exclude: /node_modules/,
    loader: ['react-hot' ,'babel'],
    query: {
      cacheDirectory: true,
      presets: ['react', 'es2015', 'react-hmre']
     }
  },