Hot Module Reloading doesn't work out of the box?

[Daniel15]

I ran pwa init and created a new React app. Then I ran pwa serve which output:

λ pwa watch
[PWA] Applying preset: @pwa/preset-react
[PWA] Starting development server on http://localhost:8080
[PWA] Rebuilt in 4.77s

After I modified one of the React component, it said:

[PWA] File changed: src\components\App\index.js
[PWA] Rebuilt in 1.60s

And I saw this in the browser console:

[WDS] App updated. Recompiling...
[WDS] App hot update...

However the page wasn't hot-reloaded and I had to refresh to see the changes.

Is that expected?

Windows 10.0.17134.228 Firefox 61.0.2

[lukeed]

Hey, it should!

I don't have access to a windows machine, but it's just react-hot-loader and webpack-dev-server. I've wrapped RHL to get rid of the 2kB file it adds in production build, but if you can test this for me that'd be great:

// import { HMR } from '@pwa/preset-react';
import { hot } from 'react-hot-loader';

// export default HMR(App, module);
export default hot(module)(App)

Thanks!

[Daniel15]

Hmm, that doesn't work for me either.

I've never used react-hot-loader and webpack-dev-server so I'm not quite sure how to debug them.

p.s. It's probably worth doing some testing on Windows given there's far more people using Windows compared to MacOS or Linux :D

[lukeed]

I'll see what I can do over the weekend.

Definitely agree re: having Windows access 😆 I tried getting a machine a few months ago, but the TLDR of it all is that it got stolen from UPS and I'm still fighting for/waiting on refund from DELL.

[zouhir]

hmm, interesting. I just started a React project with the vanilla CSS option and HMR seem to be working fine on my surface device in FF, Edge and Chrome.

Are you using WSL @Daniel15 ? I don't have that so couldn't test if it works ok.

[Daniel15]

tried getting a machine a few months ago, but the TLDR of it all is that it got stolen from UPS

Ahh, that sucks :( Sorry to hear. I hope you resolve things soon!

I just started a React project with the vanilla CSS option and HMR seem to be working fine on my surface device in FF, Edge and Chrome.

Hmm, interesting, I wonder if something weird is happening in my environment.

Are you using WSL @Daniel15 ?

No, just 'native' Windows command line.

I'm editing src\components\App\index.js.

[lukeed]

Thanks for looking into this @zouhir

TBH, I'm not really sure what could be happening @Daniel15 :/ As mentioned, there are very few actors at play. I also have coworkers who've been using this setup for a while (at work) on CMD, WSL, and true Ubuntu.

Hopefully someone can offer some expert-level insight here, as I've just strung together existing tools

[lukeed]

Hey so I finally got my hands on a Windows machine & couldn't for the life of me replicate this issue 😕

If you, or anyone(!), still sees it, please let me know 🙏 A step-by-step guide for reproduction would be helpful too, although I believe this to be related to system setup/config than what PWA is doing.

Thank you for the ticket!