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

1. Go to node_modules -> webpack -> hot folder.

2. Under that you'll find a log.js file open that edit the section (comment the log under if(level === "info") )

   module.exports = function(level, msg){
   > comment start here
   
       if (shouldLog(level)) {
           if (level === "info") {
               console.log(msg);
           } else if (level === "warning") {
               console.warn(msg);
           } else if (level === "error") {
               console.error(msg);
           }
   
       }
   > comment end here
   };
   

For more information: react-scripts 3.3.0 / 3.3.1 -> [HMR] Waiting for update signal from WDS... in console (Edge not working still) #8153

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

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.