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

Question

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

Daniel15 opened this issue 6 years ago · comments

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

Luke Edwards · Answer 1 · Sun Sep 02 2018 02:28:09 GMT+0800 (China Standard Time)

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!

Daniel Lo Nigro · Answer 2 · Sun Sep 02 2018 02:34:51 GMT+0800 (China Standard Time)

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

Luke Edwards · Answer 3 · Sun Sep 02 2018 03:00:02 GMT+0800 (China Standard Time)

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 ⚡️ · Answer 4 · Sun Sep 02 2018 03:35:16 GMT+0800 (China Standard Time)

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.

Daniel Lo Nigro · Answer 5 · Sun Sep 02 2018 05:35:41 GMT+0800 (China Standard Time)

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.

Luke Edwards · Answer 6 · Mon Sep 03 2018 02:36:16 GMT+0800 (China Standard Time)

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

Luke Edwards · Answer 7 · Mon Oct 08 2018 04:07:24 GMT+0800 (China Standard Time)

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!