问题标签 [hot-module-replacement]

给定下面的根 React 组件：

** 注意 react hot loader 导出语句。

和我的应用程序：

如何通过热加载程序包装器并访问组件中的displayMessage方法，UI如下所示：

我在开发环境中使用 docker，在 macOS 上进行热模块更换。我可以成功运行我的应用程序，并且在更改文件时，webpack 热重载实际上会接受更改。但是，在此步骤中重新编译总是失败并显示以下错误消息：

webpack.config

这是我的 webpack 配置：

包.json

我的 package.json 文件：

执行命令运行

要运行该应用程序，我使用以下命令行。它创建一个与 docker 同步的卷，并使用“start”命令启动开发服务器，执行webpack-dev-server。如果没有上述错误消息，我可以访问和使用该应用程序，但不能热重载。

我有一个以 asp.net 核心作为后端的 react/redux。热模块替换正在工作，但不幸的是，在某些时候对反应组件的任何更改都会卸载页面并在控制台中崩溃：

该项目是从 ASP.NET Core+React+Redux 应用程序的 Visual Studio 模板创建的。

我还注意到，它没有附加到服务器端渲染，早些时候，如果出现问题，VS 在导致问题的行上中断，没有.NET 异常只是以纯文本形式返回给浏览器。

老实说，我什至不知道要开始对此设置进行故障排除，有什么提示吗？

第一个问题：

HMR此链接中 webpack 文档中给出的尝试示例： https ://webpack.js.org/guides/hot-module-replacement/ 。如标题中所述：“ Gotchas ”，我尝试删除app第一次加载时添加的子元素，然后我尝试component()再次调用函数以追加由更改的print.js模块触发返回的新元素。

在浏览器中，当我更改文本时，我得到了这个print.js，这似乎有效，但是当我按下按钮时，我一直在获取旧文本值print.js

浏览器控制台屏幕截图更改print.js：

单击按钮时的屏幕截图click me and check the console（它不是我更新的文本，它的旧文本）：

我的入口文件main.js：

我的Print.js文件：

第二个问题：

print.js我简化了之前的问题，从module.hot中返回简单文本和控制台记录文本，甚至发现了奇怪的行为：

component()从回调函数触发的module.hot.accept函数在内部第一次更改时记录相同的旧文本print.js（简单文本4是在更改完成之前的文本print.js）

& 第二次更改内部print.js不会在浏览器控制台中记录任何内容：

main.js代码 ：

print.js代码 ：

我正在使用Webpack，它是热模块替换 ( HMR ) 功能和Vue.js应用程序中的 Vuex。加载顺序如下：

1. 用户点击消息中的共享链接 - 启动加载 UI 并点击 API 获取某些内容
2. 内容返回 - 初始化根的 Vuex 子模块，让我们调用它subA
3. 初始化后 - 将 UI 转换到另一个页面，并subA使用 getter 显示一些数据。

这在正常情况下每次都有效，但是当我进行文件更改、保存它们（触发 HMR）时，Vuex 子模块subA似乎被重置了——它的所有属性state都设置为初始值。

HMR 如何与 Vuex 交互，为什么会这样？

我一直在尝试使用上述设置永远执行热模块更换；失败。这是我的 Webpack 配置

...这是我app.js正在运行的快速服务器

App/index.jsx

最后，在文件更改时，浏览器的 HMR 更新在开发者控制台上给了我这个。

我一直试图永远解决这个问题，但几乎没有运气。

我在 Webpack 4 上！

这是我第一个用作捆绑react器的项目parcel。在我开始集成之前，我一直喜欢开发服务器的速度和易用性react-css-modules。老实说，我不确定是什么导致了我的错误，所以这里的任何见解都将不胜感激。

在我的终端中，hot-module-replacement正在无错误地触发。保存任何更改时，我可以在几毫秒内重建我的应用程序。实际上，浏览器会更新对 css 的任何更改，但功能会因javascript错误而被杀死：

我已经追溯到我的电话ReactDom.render()

我不确定这是否是我的配置错误，是否需要在github. 任何帮助表示赞赏。

index.js

.babelrc

.postcssrc

我正在 Dockerizing 一个支持热模块替换的 webpack 应用程序。由于我添加了 nginx 前端，因此无法连接热模块替换。Nginx 为页面提供服务，但是 js 包无法连接到webpack-dev-server在另一个 Docker 容器中运行。

我认为问题可能源于域解析问题（在 Docker 容器和 nginx 之间）或请求缺少正确的升级/主机标头。

这个项目的源代码在这里。

我在这个项目中有两个 docker 容器：

• app-webpack-webpack-dev-server为网站服务的A
• app-nginx- 反向代理

我的 nginx 配置文件位于docker/nginx.

理想情况下，用户转到localhost， nginx 拾取并重定向到app-webapp:3000。webpack-dev-server 然后通过socketjs-node套接字地址发送热模块替换代码，页面在本地更新。

我已经确认app-webpack容器可以提供支持 HMR 的页面。

提前感谢您的帮助，如果我可以提供其他信息，请告诉我！

我正在使用电子，我有一个弹出的创建反应应用程序 webpack 配置。我启用了热模块更换。

生成了热更新，在终端中我看到例如5f4dde8b4941bfe36ef8.hot-update.json，但客户端似乎找不到这些更新

知道如何调试或解决此问题吗？

我怀疑客户试图查找更新的路径是错误的。

在客户端控制台中，我可以看到：

webpack配置摘录：

webpack 开发服务器配置的摘录：

在我的项目中，我使用 Webpacks HMR 功能来动态导入和呈现 React App 组件，以应对一直有效的新变化。但是，我有另一个文件，我在其中存储了一个 Redux 减速器和一个相应的module.hot.accept调用，该调用永远只被调用一次。我剥离了几乎所有的依赖项，甚至删除了 Redux 并将其追溯到 Webpack 本身。

我的App.Store.ts基本上是这样的：

当我在我的App.Reducer.ts（无论如何）中更改某些内容时，处理程序只会被调用一次。在文件的后续更改中，调试输出console.log根本不可见。

这要么是一个更复杂的 Webpack HMR 问题，要么是我对 HMR 的处理有module.hot.accept误。有关详细信息，请参阅我链接的 MWE。

MWE

可以在此处找到完整的 MWE：https ://gitlab.com/NearAutomata/webpack-hmr-issue 。克隆并运行以下命令：

在第二次终端运行中