HMR only updates sometimes - reactjs

Question

Does anyone actually have HMR up and running smoothly? Mine is hot swapping sometimes only. How is that possible? I will edit a line of text and it will swap. Then I will go edit the same text and it will not see it. I'm using webpack 1.14. I've spent way too much time on this searching every example online and redoing and configuring my webpack.config. This thing is tough without some real documentation on exactly how to set it up with a webpack-dev-server that works everytime. With all of the unanswered questions on stackOverflow and the webpack GitHub issues section, you'd think nobody really understands it except for the creators and a few gurus.
I have a webpack config that looks like this:
var config = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
// bundle the client for webpack-dev-server
// and connect to the provided endpoint
'webpack/hot/only-dev-server',
// bundle the client for hot reloading
// only- means to only hot reload for successful updates
DEV + "/index.jsx"],
output: {
path: OUTPUT,
filename: "app.js",
publicPath: '/',
},
devtool: 'inline-source-map',
devServer: {
hot: true,
// enable HMR on the server
contentBase: OUTPUT,
// match the output path
publicPath: '/'
// match the output `publicPath`
},
plugins: [
new ExtractTextPlugin('styles.css'),
new webpack.NamedModulesPlugin(),
/* new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin()*/
],
module: {
loaders: [
{
test: /\.jsx?$/,
include: DEV,
loaders: ["react-hot", "babel-loader"],
},
{
test: /\.css$/,
loader: 'style-loader'
}, {
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
],
}
};
module.exports = config;
My file structure is:
-> EZTube
-> dev
->TabComponent
->other source code files
->index.jsx
-> output
->app.js
->index.html
->styles.css
-> webpack.config.js
-> package.json
My index.jsx looks like:
import React from "react";
import ReactDOM from "react-dom";
import TabComponent from './TabComponent/TabComponent.jsx';
import { AppContainer } from 'react-hot-loader';
ReactDOM.render(
<TabComponent />,
document.querySelector("#container")
);
if (module.hot) {
module.hot.accept('./TabComponent/TabComponent.jsx', () => {
const NewApp = require('./TabComponent/TabComponent.jsx').default
ReactDOM.render(NewApp)
});
}
The weird thing is sometimes hot swap happens when I make a change. Other times not at all. Just wondering if there was some wise internet sage out there who would understand why that is happening with the current set up.

Answer 1

I was having the same intermittent HMR problem, though I'm using
webpack-dev-middleware
webpack-hot-middleware
As HMR was working sometimes, I suspected the diffs were not always getting detected.
I'm running this on Windows, so I tried adding this configuration
watch: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000, //seems to stablise HMR file change detection
ignored: /node_modules/
},
https://webpack.js.org/configuration/watch/
My HMR is more consistently detected now.