Webpacker: HMR Not getting past "Waiting for update signal"

[btoconnor]

I'm attempting to set up HMR on a Rails project using webpacker, and running into an odd issue. When loading the page and inspecting the console, I never get past this portion:

The above screenshot is from a brand new rails app, installed with rails new --webpack and config/webpacker.yml value of hmr set to true.

I've been trying to fix this problem on an actual application I've been working on, so I thought I'd start a fresh project and see where it fell off - but this happens to me on a completely fresh project. I'm happy to upload the project I'm dealing with, but it really is just out of the gate. I'm also running webpack-dev-server from the project in its own terminal.

HMR works as intended in other applications not using webpacker, such as storybook, FWIW.

Is this a bug or have I done something wrong? I'm happy to provide any more information if it's helpful. Thanks.

[gauravtiwari]

Here is documentation on how it works: https://webpack.js.org/guides/hot-module-replacement/

Needs following to make a module hot reload:

+
+ if (module.hot) {
+   module.hot.accept('./print.js', function() {
+     console.log('Accepting the updated printMe module!');
+     printMe();
+   })
+ }

[btoconnor]

Thanks for replying so quickly. Can you elaborate on what in the webpacker configuration I'm supposed to edit to accomplish this?

Also, it's entirely possible that I'm misunderstanding, but shouldn't I still see the line [WDS] Hot Module Replacement enabled. even if I haven't configured anything to be hot loaded?

[gauravtiwari]

All looks fine to me, just hmr option need to be toggled.

but shouldn't I still see the line [WDS] Hot Module Replacement enabled. even if I haven't configured anything to be hot loaded?

That message comes with react hot loader (if I am not mistaken)

This is all you would need to setup in an entry file or pack file. Please note the actual module should live outside of this entry file (in this case print.js). https://webpack.js.org/guides/hot-module-replacement/

+
+ if (module.hot) {
+   module.hot.accept('./print.js', function() {
+     console.log('Accepting the updated printMe module!');
+     printMe();
+   })
+ }

[gauravtiwari]

app/javascript: 
  # src files..... (or million other ways)
  src: 
    components: 
  packs: 
    # bootstrap components in entry, enable hot API
    - only entry files
    - app.js
    - calendar.js

[btoconnor]

Hi, thanks again for helping me on this. One last clarification - does it make sense to use webpacker 3 with react-hot-loader?

I've made further progress by configuring the react-hot-loader project and got HMR to work on a fresh application, and I just want to make sure I'm understanding the setup properly.

Thanks.

[gauravtiwari]

@btoconnor No, don't think it's needed anymore. Only HMR API code needs to be added in a entry/pack file:

+
+ if (module.hot) {
+   module.hot.accept('./print.js', function() {
+     console.log('Accepting the updated printMe module!');
+     printMe();
+   })
+ }

[Pythux]

Hi,
for people passing by and wondering what they have done wrong on a fresh install when they see on the console:

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

but nothing append after saving a file (no error message), you could check if you have enough watchers (it watch files changes):
https://webpack.js.org/configuration/watch/#not-enough-watchers

it was my case, hop it will save days and pains ;)