25

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"]
}
Oscar
  • 805
  • 2
  • 10
  • 24

9 Answers9

22

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:

// webpack.config.js

module.exports = {
  devServer: {
    hot: true
  },
  target: 'web',
  mode: 'development',
  [...]
}
Calsal
  • 1,375
  • 14
  • 25
  • 5
    I've been bashing my head for 2 hours now unable to make neither livereload nor HMR work until I found your comment. THANK YOU! – Tony Bogdanov Mar 18 '21 at 11:50
  • Interesting, so I am needing to use `target: ["web", "es5"]` to support IE11, but that breaks HMR apparently... – ParkerD Apr 14 '21 at 23:25
  • 1
    If anyone, like me, needs to use `target: ["web", "es5"]`, you need at least v4.0.0-beta.1 of `webpack-dev-server` installed. Reference: https://github.com/webpack/webpack-dev-server/issues/2758#issuecomment-813279691 – ParkerD Apr 14 '21 at 23:34
11

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

Oscar
  • 805
  • 2
  • 10
  • 24
  • Worked for me too. Did you figure out the core issue? In my case, the app works fine standalone, but ultimately I'm porting it inside of a CRM so for development I have to reference `localhost:8080/dist/app.js` To get the functionality and HMR. Worked fine for my other projects... this one not sure what the deal is. Let me know if you have any additional insight please. Thanks! – user1447679 Jun 25 '19 at 02:20
  • 1
    where this line needs to be added? – Sravan Kumar May 10 '20 at 12:50
  • @SravanKumar `webpack.config.js` as far as I remember – Oscar May 13 '20 at 06:07
  • @Oscar can you please tellme your mail id... I'm having doubts which i want t clear. I'm beginner in react. – Sravan Kumar May 14 '20 at 05:47
  • 1
    In webpack v4, this was superseded by `allowedHosts: 'all'`. – JoeTidee Oct 11 '21 at 20:20
6

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.

Alf Moh
  • 7,159
  • 5
  • 41
  • 50
2

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: 'https://something.else',
        changeOrigin: true
    }
}
John
  • 1,081
  • 1
  • 9
  • 34
0

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)
Sean
  • 21
  • 2
0

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.

shaswat.dharaiya
  • 381
  • 4
  • 13
0

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

North Gork
  • 47
  • 3
0

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.

Vahid
  • 6,639
  • 5
  • 37
  • 61
-1

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 (https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr.) Good luck!

Angel Cochache
  • 1
  • 1
    Hi and welcome to SO ! Please read [How to write a good answer](https://stackoverflow.com/help/how-to-answer) . Try to add some notes about what your answer does better or differently compared to the already accepted one ! – turbopasi Jan 26 '21 at 06:23