Hot reload doesn't work on Windows

[ronag]

Cloned latest version. Run npm install/start open localhost:3000 and change "Hello World" to "Bar"... and nothing happens.

[gaearon]

Can't reproduce this. Can you copy-paste what you see in console on startup & after edits?

[gaearon]

Expected output:

(before edits)

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

(after edits)

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - 5
[HMR] App is up to date.

[gaearon]

Also it would help to learn a little about your environment (browser, OS). And your Webpack console output (not just in browser but also in terminal).

[ronag]

Windows 8, Chrome 39.0

No errors in console output and "bundle is now VALID".

[gaearon]

No logs in console output either? What about network requests?

[Mavrin]

On Windows platform browser can't establish socket connection on 0.0.0.0, i change server 0.0.0.0 to localhost. It works for me.

[gaearon]

@Mavrin

That's interesting! Thank you for reporting. Maybe I'll change it back to localhost in this case.. 0.0.0.0 is convenient for debugging on mobile device but I didn't realize it wouldn't work on Windows.

[wizzard0]

My five cents: On Windows, bind service to 0.0.0.0, connect client to 127.0.0.1 (NOT localhost) Connecting to localhost if IPv6 is enabled may cause ::1 attempt, then 1 second delay, then 127.0.0.1 connect.

[gaearon]

So what do we need to do? I'll gladly accept a PR that fixes it for Windows but it would be best to still have 0.0.0.0 where it's supported..

[bebraw]

Maybe you could set up a separate module and push the ip there. Have server.js and webpack.config.js depend on that. A naive implementation could look something like this:

module.exports = function() {
    return process.platform.indexOf('win') === 0? '127.0.0.1': '0.0.0.0';
};

You could extend the approach to support environment variables through process.env and check against something like DEV_SERVER_IP or something. You get the idea.

[gaearon]

Let's just keep it simple and use localhost. Hot updates don't seem to come to iOS via 0.0.0.0 anyway (not sure if it's a sockets problem or something else).

[gaearon]

Fixed via 2be2daa48c439022d3bfd39f17f123f601077b2c

[attilah]

Can we revisit this issue with my repro:

The repro is based on react-hot-boilerplate and gave us a hard time ;-)

1. start node server.js
2. update app.jsx, save -> reload happens
3. ctrl+c node process
4. start node server.js
5. update app.jsx, save -> reload is not working
6. OVERWRITE (copy from another folder app.jsx) -> reload is triggered!
7. update app.jsx, save -> reload is working again from now on.

[gaearon]

ctrl+c node process start node server.js

I don't think reload would work after that, unless you refresh the page. It need initial chunk and hot chunk to be compiled during the same Node server run.

[attilah]

re-read how I wrote ;-) when I start the node again as in step 1, live reload must be active again, since it not different. Steps 1-2 and 4-5 is the same, but in step 5 the reload will not happen, like the file change was not triggered somewhere.

If you like I can do a repro on skype?

[gaearon]

I'm sorry that I don't quite understand. Can't really get on Skype now.. Let's try again.

If you stop the server, the client won't be able to reconnect to the newly started server. Stopping the server kills the connection. So after (4) you need to refresh the client manually. Hot reload doesn't work between restarting the server.

Does this make sense, or have I missed refreshing in your steps? Thanks for following through with this..

[attilah]

The client will be able to connect to the newly created server after refreshing the browser, but after this if I edit an existing file (app.jsx) then the connected browser will not refresh with hot reload.

Meanwhile I've figured out what caused the problem. The app.jsx was lowercase, but the import statement var like this: import App from ('./App');

So the casing of the app.jsx caused the problem. The problem is that I don't know which component is responsible for watching the files, but for casing problems with filenames a warning should be raised in cases like this on OSes which has case insensitive filesystem.

What I know for sure now is that this problem is not within your react hot loader ;-)

Thanks for taking your time!

[gaearon]

Oh, great. I see. An older version of boilerplate had wrong casing, the current master should be OK. I wrote about it here:

Also make sure that your requires have the same filename casing as the files. Having App.js and doing require('app') might trip the watcher on some systems.

[attilah]

Oh nice, I've read almost everything, this troubleshooting page left out. Nice writeup ;-)