hot reloading not functioning

[Ali Ayoub]

any ideas why it is failing to hot reload? Am required to refresh in order to update while working on your react-dnd chess tutorial, thanks :)

not sure if am doing something incorrectly but needed to add es6 and jsx regex to the loaders as well as a resolve key for the extensions for it to render properly.

*11.7.2015 - installed Node 4.x, still not working unfortunately.
Re-installed webpack-dev-server globally after the new node install and it's now working.

[Cole Townsend]

Having the same problem @cryptolemming

[Steven Birr]

Did not work for me at first. After installing Node 4 and the latest versions of node-gyp and npm hot module reloading works. Maybe my comment in this thread helps others: nodejs/node-gyp#629 (comment)

[Mariusz Maroń]

Hi, for me it does not work as well, even if I have installed Node 4. Can't reload content at all.

[Steven Birr]

.., Sorry, have to rectify... For me, it does still not work. Sometimes hot code reloading works, sometimes not. Very strange...

[Mariusz Maroń]

What I noticed this is all about some bad settings/packages/versions in node. At work I normally installed boilerplate and it was working like a charm. At home I have problems. I need to reinstall completely my env ^^

[Steven Birr]

Maybe this could help you: I had the same issue. At work it worked like a charm, at home sometimes yes, sometimes no. Thus, it had to be any timing issue. I played around with some WebpackDevServer options. Try this:

...
new WebpackDevServer(webpack(config), {
  watchOptions: {
    aggregateTimeout: 300,
    poll: 300
  },
})
...

Now, webpack hot reloading works for me.
Tried it with node 4.2.2, npm 3.5.0, webpack 1.12.9, webpack-dev-server 1.14.0

[Vu Le]

I have experienced this issue. I tried @stevenpietzsch's solution and it seems working but no idea what I'm doing actually. Where the problem comes from is my concern now, any idea?

[StefanHinck]

Yep @stevenpietzsch your addition worked for me as well. So my server.js now looks like:

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true,
  watchOptions: {
    aggregateTimeout: 300,
    poll: 300
  },...

I have no idea what this addition changes though, care to clarify a bit?

[之梦]

@stevenpietzsch Yeah! It works! Thansk! But there should not be a default configuration.

[Josh Hardy]

hi guys. Not sure if you guys are still experiencing this problem. The solution that works for me was to remove "hot: true" from the server.js.

The reason for this is you are already using webpack.HotModuleReplacementPlugin along with the React Hot Loader module. Dan gives a specific note within his wiki to not call out --hot. --hot is the same as hot: true for Inline Dev Server.

See: http://gaearon.github.io/react-hot-loader/getstarted/
Also: https://webpack.github.io/docs/webpack-dev-server.html#inline-mode-with-node-js-api

[Alexander Folk]

This is all very confusing. I tried @Prophet32j's recommendation and that got my app refreshing completely upon each update. I then put back 'hot: true' and tried what @stevenpietzsch suggested and now it updates only the specific component when it detects a change, checking every .3 seconds I assume?

[Steven Birr]

I think, I found the solution for the problem. I found the clue here: https://webpack.github.io/docs/webpack-dev-server.html#working-with-editors-ides-supporting-safe-write
You should have a look at your IDE, in my case PHPStorm, and disable the safe mode. After that, hot reloading works like a charm, even without

hot: true,
watchOptions: {
  aggregateTimeout: 300,
  poll: 300
}

[Alexander Folk]

thanks @stevenpietzsch, I'll look into this but I'm just using sublime and running from my terminal... will let you know if I find any kind of safe mode though.

[dan]

Closing as most of it is related to Webpack, and we can’t fix these issues here.

[Eric Chaves]

Not sure this is relevant, but leaving a note just in case: I had a strange and subtle hot-reloading bug due to a caps case issue. When my file path used the incorrect casing, everything still worked except for hot-reloading on that module. The app was working, but hot-reloading failed silently.

I changed the incorrect import Home from '../components/Home'; to the correct import Home from '../Components/Home'; ('C' -> 'c') and hot reloading worked again. Sneaky.

It looks like caps-case issues have bitten others in similar situations: #8