无法设置 HMR:在控制台中卡住“正在等待来自 WDS 的更新信号...”

IT技术 javascript reactjs webpack
2021-04-01 01:18:54

所以我为我的 React 应用程序设置了一个最小配置,我[HMR] Waiting for update signal from WDS...在控制台中看到了这条消息,我的浏览器页面没有反映任何变化

根据这个解决方案,我试图添加@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>
  );
}

和我的.babelrcconf:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
6个回答

我在[HMR] Waiting for update signal from WDS...使用webpack5webpack-dev-severbrowserslist.

browserslistwebpack5 一起使用时这似乎是一个错误webpack-dev-sever正如chenxsan here回答的那样可以在此处找到有关该错误的更多信息

解决方案(目前)是添加target: 'web'到 webpack 配置中。例子:

module.exports = {
  devServer: {
    hot: true
  },
  target: 'web',
  mode: 'development',
  [...]
}
如果有人像我一样需要使用target: ["web", "es5"],则至少需要webpack-dev-server安装v4.0.0-beta.1 参考:github.com/webpack/webpack-dev-server/issues/...
2021-05-29 01:18:54
有趣,所以我需要用来target: ["web", "es5"]支持 IE11,但这显然破坏了 HMR...
2021-06-03 01:18:54
在我找到你的评论之前,我一直在敲我的头 2 个小时现在无法使 livereload 和 HMR 工作。谢谢!
2021-06-09 01:18:54

好的,显然就是导致问题的原因。我加了

disableHostCheck: true

到我的 webpackdevServer配置,它起作用了(请注意,这只是一种解决方法)。

而且我不知道为什么在 Windows 10 中没有错误消息(在我从 win7 启动我的应用程序后,控制台正在发送垃圾邮件 Invalid Host/Origin header

也为我工作。你搞清楚核心问题了吗?就我而言,该应用程序独立运行良好,但最终我将其移植到 CRM 中,因此为了开发,我必须参考localhost:8080/dist/app.js以获取功能和 HMR。对我的其他项目工作正常......这个不确定交易是什么。如果您有任何其他见解,请告诉我。谢谢!
2021-05-31 01:18:54
这行需要加在哪里?
2021-06-02 01:18:54
@Oscar 你能告诉我你的邮件 id...我有一些我想澄清的疑问。我是反应的初学者。
2021-06-02 01:18:54
@SravanKumarwebpack.config.js据我所知
2021-06-06 01:18:54
在 webpack v4 中,这被allowedHosts: 'all'.
2021-06-16 01:18:54

出现此错误可能意味着您有一个递归,即在其内部导入一个组件。这可能在重构代码期间发生。

主页这有助于某人。

我遇到了这个问题,显然导致我的问题的原因是 iframes 带有 src="/blank.html",我通过添加代理解决了它

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

擦除和替换节点module:我的 REACT 项目控制台显示“正在等待来自 WDS 的更新信号......”,然后是找不到每个module。

对我有用的是在我的终端中使用这两行删除并重新安装我的节点module。然后我的应用程序再次运行。

rm -rf node_modules
yarn install (or npm install)