Can't set up the HMR: stuck with "Waiting for update signal from WDS..." in console

So I'm setting up a minimal configuration for my React app, and I faced that [HMR] Waiting for update signal from WDS... message in console and my browser page doesn't reflect any changes

According to this solution I had tried to add @babel/preset-env, but it had no success. And I don't think that it's the root of the problem, since even if I change my index.js file, no changes applied in the browser

My webpack.config.js:

const { HotModuleReplacementPlugin } = require('webpack'); module.exports = { mode: 'development', devServer: { watchContentBase: true, publicPath: '/dist/', hot: true }, plugins: [new HotModuleReplacementPlugin()], module: { rules: [{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }] }, resolve: { extensions: ['.js', '.jsx'] } }; 

src/index.js:

import React from 'react'; import { render as r } from 'react-dom'; import App from './App'; r(<App />, document.querySelector('#root')); 

src/App.jsx:

import React from 'react'; export default function App() { return ( <div> <h1>Hello from React Version: {React.version}</h1> </div> ); } 

and my .babelrc conf:

{ "presets": ["@babel/preset-env", "@babel/preset-react"] } 

9 Answers

I had the same issue being stuck at [HMR] Waiting for update signal from WDS... while using webpack 5, webpack-dev-sever and browserslist.

It seems to be a bug when using browserslist with webpack 5 and webpack-dev-sever as answered by chenxsan here. More info about the bug can be found here.

The solution (for now) is to add target: 'web' to the webpack config. Example:

module.exports = { devServer: { hot: true }, target: 'web', mode: 'development', [...] } 

Ok so apparently this is what causing the issue. I added

disableHostCheck: true 

to my webpack devServer config and it worked (note that it's just a workaround).

And I have no idea why there were no error messages in windows 10 (after I had booted my app from win7 the console was spamming with Invalid Host/Origin header

Having this error can mean that, you have a recursion, that is importing a component within itself. This can happen during refactoring of your code.

Home this helps someone.

I got this problem and apparently what caused my problem was having iframes with src="/blank.html" and I solved it by adding a proxy

proxy: { '/*.html': { target: ' changeOrigin: true } } 

WIPE AND REPLACE NODE MODULES: My REACT project console read “Waiting for update signal from WDS…" followed by every module not being found.

What worked for me was to remove and re-install my node modules with these two lines in my terminal. Then my app worked again.

rm -rf node_modules yarn install (or npm install) 

So if you are using Firebase as your backend, which was the case in my situation. You might have exhausted your daily quota and because of that, you may not be able to read/write or even access any components that will be using firebase.

Due to this, I was constantly getting [HMR] Waiting for update signal from WDS... in the console. You might have your warnings disabled (which again was the case in my situation) and bcoz of that you won't be seeing that warning.

In my case this was cause by a syntax error in my code.Check your code for errors that go unnoticed.

For those who are getting this error in Angular, in my case the problem was that I was using --live-reload false with --hmr at the same time. So ng serve --live-reload false --hmr will not work.

I think removing the node_modules is not the best option. I believe most node_module came with the old version webpack that mean we need to update the new version TIPS(If you took the route of using webpack-dev-middleware instead of webpack-dev-server, please use the webpack-hot-middleware package to enable HMR on your custom server or application.) Attached please read the link for a better implementation on the HMR webpack () Good luck!