javascript 无法设置 HMR：在控制台中卡住“正在等待来自 WDS 的更新信号...”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53905253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't set up the HMR: stuck with "Waiting for update signal from WDS..." in console
提问by Oscar
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
所以我为我的 React 应用程序设置了一个最小配置，我[HMR] Waiting for update signal from WDS...在控制台中看到了这条消息，我的浏览器页面没有反映任何变化
According to thissolution 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.jsfile, no changes applied in the browser
根据这个解决方案，我试图添加@babel/preset-env，但没有成功。而且我不认为这是问题的根源，因为即使我更改了index.js文件，浏览器中也不会应用任何更改
My webpack.config.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:
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:
src/App.jsx：
import React from 'react';
export default function App() {
return (
<div>
<h1>Hello from React Version: {React.version}</h1>
</div>
);
}
and my .babelrcconf:
和我的.babelrcconf：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
回答by Oscar
Ok so apparently thisis what causing the issue. I added
好的，显然这就是导致问题的原因。我加了
disableHostCheck: true
to my webpack devServerconfig and it worked (note that it's just a workaround).
到我的 webpackdevServer配置，它起作用了（请注意，这只是一种解决方法）。
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
而且我不知道为什么在 Windows 10 中没有错误消息（在我从 win7 启动我的应用程序后，控制台正在发送垃圾邮件 Invalid Host/Origin header
回答by John
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
我遇到了这个问题，显然导致我的问题的原因是 iframes 带有 src="/blank.html"，我通过添加代理解决了它
proxy: {
'/*.html': {
target: 'https://something.else',
changeOrigin: true
}
}
回答by sina
According to this link, it's a bug.
根据此链接，这是一个错误。
Actually that is not an error, it's just normal working log. But I also found that log annoying and got rid of it by commenting the log statement.
实际上这不是错误，它只是正常的工作日志。但我也发现日志很烦人，并通过评论日志语句来摆脱它。
You can do it by following steps:
您可以按以下步骤操作：
1-goto node_modules -> webpack -> hot folder
1-goto node_modules -> webpack -> 常用文件夹
2-Under that you'll find a log.js file open that
2-在那里你会发现一个 log.js 文件打开
3-edit the section (comment the log under if(level === "info"))
3-编辑该部分（评论下的日志if(level === "info")）
module.exports = function(level, msg) {
if (shouldLog(level)) {
if (level === "info") {
// console.log(msg);
} else if (level === "warning") {
console.warn(msg);
} else if (level === "error") {
console.error(msg);
}
}
};
