Reactjs console error ([HMR] Waiting for update signal from WDS...)

Question

I struggle to solve this error which is appearing in the chrome console . seems a webpack error .. but where to solve it

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

Answer 1

You can remove this from your console

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

you can just go to log.js file which is present in node_modules -> webpack -> hot folder Under that you'll find a log.js file now you have to comment the section below using ctrl+/.--

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

so now your function will look like --

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);
    //  }
    // }
};

and to ensure it works just run npm start again it'll get removed from console.

Answer 2

As posted in a comment to the question, this is NOT an error. Neither is it a warning.

It is simply letting you know, while in development, that your webpage will automatically reload when the browser hears about changes you are making ('Hot reloading'). All going well, this is when you save changes to the source files.

It should not appear when you create a production version of the site (which you should do when ready to deploy the website, as many things are optimized in the production version).

So the console message [HMR] Waiting for update signal from WDS... simply means the browser is listening for any changes from the Webpack Developments Server so it can perform Hot Module Replacement.

If you comment out the log code as recommended in other answers you are interfering with a third-party codebase, and it will prevent other logging which may cause problems later.

I am adding this as an answer, as this answer redirects here, even though the answers there are better and the other answers here disable an important resource.

Answer 3

It is related HMS. Seems like you are using custom react template. You need to find your webpack config file and check for the dev-server config options. I have attached a link here it will show you how to enable HMS. Let me know if it works. https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr

Answer 4

Please check your routes in App.js. This happened to me when I had downgraded from React 17 to 16 as 17 isn't compatible with several packages that 16 used.

Thing is I forgot to change back the routes to the rendering in 16. So had to change "element" to "Component" before it worked.