Webpack-dev-server: HMR not working and logging "Waiting for update signal from WDS"

[marcofugaro]

[HMR] Waiting for update signal from WDS...

• Operating System: macOS
• Node Version: v12.6.0
• NPM Version: 6.9.0
• webpack Version: 4.38.0
• webpack-dev-server Version: 3.7.2
• Browser: Chrome or Firefox

• [x] This is a bug
• [ ] This is a modification request

Code

Instructions for reproducible test repo (link):

• git clone [email protected]:marcofugaro/hmr-test-repo.git
• cd hmr-test-repo
• npm i
• npm start

webpack.config.js:

module.exports = {
  mode: 'development',
  devServer: {
    host: '0.0.0.0',
    port: '8080',
    publicPath: '/',
    contentBase: './public/',
    watchContentBase: true,
    watchOptions: {
      ignored: /node_modules/,
    },
    // enable HMR
    hot: true,
    hotOnly: true,
  },
  plugins: [
    // Generates an `index.html` file with the <script> injected.
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
    }),
  ],
}

Expected Behavior

HMR should work

Actual Behavior

The message [HMR] Waiting for update signal from WDS... appears in the console and the HMR is broken, when editing a file:

[alexander-akait]

Remove webpack.HotModuleReplacementPlugin, use only hot (no need hot and hotOnly), also don't open browser in after, it is not hook for this, please read docs about options for webpack-dev-server

[marcofugaro]

Sure! I did all those things but the problem still persists.

I read the docs of webpack-dev-server and after was the most suitable hook, I opened #1509 once for this reason.

[alexander-akait]

@marcofugaro anyway can you create minimum reproducible test repo?

[marcofugaro]

Sure! I'll strip away the unnecessary stuff

[marcofugaro]

@evilebottnawi here is the test repo

https://github.com/marcofugaro/hmr-test-repo

just npm i, npm start, and watch the browser console, when editing a file this happens:

[hiroppy]

See https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr.

[marcofugaro]

Alright, my bad, didn't know the whole module.hot.accept thing was needed. Tought you could hot reload anything anytime.

The issue now becomes that the message [HMR] Waiting for update signal from WDS... still appears event when clientLogLevel: 'silent', is in the config, but I'll open a separate issue for that

[PedroRuiz]

+1

[MuhammadTahir7]

[HMR] Waiting for update signal from WDS...
client:48 [WDS] Hot Module Replacement enabled.
client:52 [WDS] Live Reloading enabled.
facing this error

[nhooey]

Alright, my bad, didn't know the whole module.hot.accept thing was needed. Tought you could hot reload anything anytime.

The issue now becomes that the message [HMR] Waiting for update signal from WDS... still appears event when clientLogLevel: 'silent', is in the config, but I'll open a separate issue for that

@marcofugaro: Did you open a separate issue? Got a link?

Here it is: #2166

[shaheemMPM]

@marcofugaro

Actually that is not an error it's just normal working log
But I also found that log annoying and get rid of it by commenting the log statement..

You can do it by following steps

1. Goto node_modules -> webpack -> hot folder
2. Under that you'll find a log.js file _open that_
3. edit the section _(comment the log under_ if(level === "info") _)_

module.exports = function(level, msg) {
    if (shouldLog(level)) {
        if (level === "info") {
            // console.log(msg);
        } else if (level === "warning") {
            console.warn(msg);
        } else if (level === "error") {
            console.error(msg);
        }
    }
};

[benguoztrk]

@marcofugaro

Actually that is not an error it's just normal working log
But I also found that log annoying and get rid of it by commenting the log statement..

You can do it by following steps

1. Goto node_modules -> webpack -> hot folder
2. Under that you'll find a log.js file _open that_
3. edit the section _(comment the log under_ if(level === "info") _)_

module.exports = function(level, msg) {
  if (shouldLog(level)) {
      if (level === "info") {
          // console.log(msg);
      } else if (level === "warning") {
          console.warn(msg);
      } else if (level === "error") {
          console.error(msg);
      }
  }
};

Hello, I am experiencing the same issue.
I already edit log.js but still got "[HMR] Waiting for update signal from WDS..." on my console.

[shaheemMPM]

@benguoztrk there are some other files which log this message to the console, so try to find the file which is pushing the log
You can find that in the console of your browser. (preferred:: chrome)

[danielkv]

it just started now. it was running just fine all of the sudden. gone wrong.

[ad99526]

@marcofugaro

Actually that is not an error it's just normal working log
But I also found that log annoying and get rid of it by commenting the log statement..

You can do it by following steps

1. Goto node_modules -> webpack -> hot folder
2. Under that you'll find a log.js file _open that_
3. edit the section _(comment the log under_ if(level === "info") _)_

module.exports = function(level, msg) {
    if (shouldLog(level)) {
        if (level === "info") {
            // console.log(msg);
        } else if (level === "warning") {
            console.warn(msg);
        } else if (level === "error") {
            console.error(msg);
        }
    }
};

Hello, I am experiencing the same issue.
I already edit log.js but still got "[HMR] Waiting for update signal from WDS..." on my console.

Hey I would suggest restart the server

[manutdmohit]

"This is not working"
module.exports = function(level, msg) {
if (shouldLog(level)) {
if (level === "info") {
// console.log(msg);
} else if (level === "warning") {
console.warn(msg);
} else if (level === "error") {
console.error(msg);
}
}
};

[babak-bekhrad]

@marcofugaro

Actually that is not an error it's just normal working log
But I also found that log annoying and get rid of it by commenting the log statement..

You can do it by following steps

1. Goto node_modules -> webpack -> hot folder

2. Under that you'll find a log.js file  _open that_

3. edit the section _(comment the log under_ `if(level === "info")` _)_

module.exports = function(level, msg) {
  if (shouldLog(level)) {
      if (level === "info") {
          // console.log(msg);
      } else if (level === "warning") {
          console.warn(msg);
      } else if (level === "error") {
          console.error(msg);
      }
  }
};

Thanks, it works perfectly for me.