Hot reload doesn't work on Windows about react-hot-boilerplate HOT 19 CLOSED

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

from react-hot-boilerplate.

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.

from react-hot-boilerplate.

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).

from react-hot-boilerplate.

Windows 8,
Chrome 39.0

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

from react-hot-boilerplate.

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

from react-hot-boilerplate.

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.

from react-hot-boilerplate.

@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.

from react-hot-boilerplate.

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.

from react-hot-boilerplate.

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..

from react-hot-boilerplate.

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.

from react-hot-boilerplate.

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).

from react-hot-boilerplate.

Fixed via 2be2daa

from react-hot-boilerplate.

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.

from react-hot-boilerplate.

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.

from react-hot-boilerplate.

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?

from react-hot-boilerplate.

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..

from react-hot-boilerplate.

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!

from react-hot-boilerplate.

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.

from react-hot-boilerplate.

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

from react-hot-boilerplate.