Home/ Questions/Learn how to fix error: [hmr] waiting for update signal from wds..
Next
Answered
Parker Li
  • 27
Asked: 2022-05-18T16:07:34+00:00 In:

Learn how to fix error: [hmr] waiting for update signal from wds..

  • 27

. Advertisement .

..3..

. Advertisement .

..4..

I’m trying to run a new project. I do a couple of things like this:

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']
  }
 };
import React from 'react';
 import { render as r } from 'react-dom';
 import App from './App';
 
 r(<App />, document.querySelector('#root'));
import React from 'react';
 
 export default function App() {
  return (
  <div>
  <h1>Hello from React Version: {React.version}</h1>
  </div>
  );
 }
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

But in my program, I am getting the warning:

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

Can someone explain why the “ [hmr] waiting for update signal from wds…” issue happened? Where have I gone wrong? Thank you!

waiting for update signal
Share

2 Answers

  1. Best Answer
    Expert

    The cause:

    You receive this warning message perhaps due to there is a recursion when you rework your code. Itis importing a component within itself and it causes the error.

    Solution:

    There is a workaround for this error. It is adding below command to your webpack devServer config. we have used this solution and it’s successful:

    disableHostCheck: true

    And we don’t know why no error messages appear in Windows 10 after we started our app from win7 and the console sends spams with Invalid Host/Origin header.

    • 10

  2. The same problem occurred to me when I tried [HMR] Waiting for update signal from WDS... 5 and webpack-dev-sever 13 and browserslist.

    It appears to be a bug with browserslist and webpack 5, as Answered by chenxsan. has more information about the bug.

    For now, you can add target: 'web' in the webpack configuration. Example: 

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

Leave an answer

You must login to add an answer.

Need An Account,