webpack 无法设置HMR：控制台中出现“等待来自WDS的更新信号...”

jei2mxaa 于 2022-11-13 发布在 Webpack

关注(0)|答案(9)|浏览(361)

因此，我正在为React应用程序设置最低配置，但我在控制台中看到了[HMR] Waiting for update signal from WDS...消息，而浏览器页面没有反映任何更改
根据this解决方案，我尝试添加@babel/preset-env，但没有成功。我不认为这是问题的根源，因为即使我更改了我的index.js文件，也没有在浏览器中应用任何更改
我的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>
  );
}

和我的.babelrc配置：

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

webpack

来源：https://stackoverflow.com/questions/53905253/cant-set-up-the-hmr-stuck-with-waiting-for-update-signal-from-wds-in-cons

9条答案

按热度按时间

r8uurelv1#

我在使用webpack 5、webpack-dev-sever和browserslist时遇到了同样的问题，卡在[HMR] Waiting for update signal from WDS...上。
将browserslist与webpack 5一起使用，将webpack-dev-sever作为answered by chenxsan here使用时，这似乎是一个错误。有关此错误的更多信息，请参阅here。
解决方案（目前）是将target: 'web'添加到Webpack配置中。示例：

// webpack.config.js

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

赞(0）回复(0）举报 2022-11-13

5w9g7ksd2#

好的，很明显this是导致这个问题的原因。我补充说

disableHostCheck: true

到我的webpack devServer配置，它工作了（注意，这只是一个变通办法）。
我也不知道为什么在windows10中没有错误信息（在我从win7启动我的应用程序后，控制台上出现了Invalid Host/Origin header

赞(0）回复(0）举报 2022-11-13

f45qwnt83#

出现此错误可能意味着出现了递归，即在其自身中导入组件。这可能在重构代码时发生。

赞(0）回复(0）举报 2022-11-13

dgtucam14#

家这帮人。
我遇到了这个问题，很明显，导致我的问题的原因是使用src="/blank.html”的iframe，我通过添加代理解决了这个问题

proxy: {
    '/*.html': {
        target: 'https://something.else',
        changeOrigin: true
    }
}

赞(0）回复(0）举报 2022-11-13

quhf5bfb5#

擦除和更换节点模块：我的REACT项目控制台显示“正在等待来自WDS的更新信号...”，然后是每个未找到的模块。
对我有效的方法是在我的终端中用这两行代码删除并重新安装我的节点模块，然后我的应用程序又工作了。

rm -rf node_modules
yarn install (or npm install)

赞(0）回复(0）举报 2022-11-13

hrirmatl6#

因此，如果你使用Firebase作为后端，这是我的情况。你可能已经用尽了你的每日配额，因此，你可能无法读/写，甚至访问任何将使用firebase的组件。
由于这个原因，我经常在控制台上看到[HMR] Waiting for update signal from WDS...。你可能已经禁用了警告（我的情况也是如此），因为你不会看到警告。

赞(0）回复(0）举报 2022-11-13

of1yzvn47#

在我的例子中，这是由我的代码中的语法错误引起的。检查你的代码中没有注意到的错误。

赞(0）回复(0）举报 2022-11-13

dba5bblo8#

对于那些在Angular中遇到这个错误的人来说，在我的例子中，问题是我同时使用了--live-reload false和--hmr。所以ng serve --live-reload false --hmr将不起作用。

赞(0）回复(0）举报 2022-11-13

yhxst69z9#

我认为删除node_modules不是最好的选择。我相信大多数node_modules都是旧版本的webpack，这意味着我们需要更新新版本的提示（如果使用webpack-dev-middleware而不是webpack-dev-server，请使用webpack-hot-middleware软件包在您的自定义服务器或应用程序上启用HMR。）请阅读附件中的链接，以更好地实现HMR webpack祝你好运！

赞(0）回复(0）举报 2022-11-13

我来回答

webpack 无法设置HMR：控制台中出现“等待来自WDS的更新信号...”

9条答案

相关问题

热门标签

最新问答