HMR only updates sometimes

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.

Some things, like component `constructor()`s, will never re-run in a hot reload. Only speculating: maybe webpack is trying to track too many files and OS is running out of file descriptors? How big is the project? Is it inside docker or vagrant? — Andy Ray, Jan 14 '17 at 23:56
well its a button text. In the render method of a component. Even changing the .css doesnt work. I've rebuilt and tried every variation of this thing I found. do I need module.hot.accept in every component? — Brian Stallter, Jan 14 '17 at 23:58
well in dev mode you shouldn't be using `ExtractTextPlugin`. This moves css to a separate file. You want your css turned into JS code and then injected in the page, bundled into your dev javascript bundle, which is weird but lets webpack hot reload the css — Andy Ray, Jan 15 '17 at 00:03
i also don't think you need to check for module.hot for components if you're using react-hot-loader. as a sanity check I would also go to the "sources" tab of the chrome inspector and turn on "pause on exceptions" and check "pause on uncaught exceptions, and make a change, and see if an error is blocking. — Andy Ray, Jan 15 '17 at 00:05
No error is blocking, I checked, i turned off the extractTextPlugin.. I thought there was hope, I made a change it updated once, then it sees no more changes. — Brian Stallter, Jan 15 '17 at 00:15
It might be time to just hit ctrl+c, then rerun webpack, and webpack-dev-server. lol. In trying to speed up my dev experience I've spent 6 hours trying to set this up, which I'd probably never use an extra 6 hours just rebuilding everytime. — Brian Stallter, Jan 15 '17 at 00:17
if you can put the whole project online in github, someone can clone it and see if they can reproduce the behavior. otherwise this question is impossible to answer in current form. — Andy Ray, Jan 15 '17 at 00:19

score 2 · Answer 1 · answered Apr 20 '17 at 21:55

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.

I eventually just gave up and resigned to the fact that the hot update does not detect all changes. I'm pretty sure I did everything to a T, and the hot update is just not really 100% a hot update of everything. — Brian Stallter, Apr 23 '17 at 19:53

HMR only updates sometimes

1 Answers1