问题标签 [react-hot-loader]

我尝试将slatejs包实现到我的反应应用程序以创建我的自定义编辑器，它工作得很好，但热重载停止工作。当我import进入某个组件时它会停止。我使用 webpack-dev-server+react-hot-loader

首先我认为原因是我的自定义应用程序设置，但它不适用于https://github.com/facebookincubator/create-react-app 和https://github.com/davezuko/react-redux-入门工具包

据我所知slatejs，包使用browserify，也许这就是原因，但它不应该有影响，因为它只是一个包和react-hot-loader排除的webpack设置node_modules

谢谢！

我在使用 react hot loader 3 时遇到问题。

我的应用程序中的某些模块得到了热更新，有些则没有。我有一个文件夹（应用程序），其中包含我所有的组件。在这个文件夹中，我有 index.js，我从文件夹中导出所有模块。在文件夹中，我有index.js导出组件本身的文件。例子：

app/test包含test.js和index.js app/test/index.js包含export test from ./test.js app/index.js包含export * as test from ./test

在我的应用程序的某个地方，我像这样导入这个测试应用程序import { test } from ../app

在这里，魔法出现了。hmr 不适用于 test.js。但是，如果我export * as test from ./test在其中添加注释app/index.js并直接导入我的测试组件，import test from ../app/test/test.js则 hmr 可以工作。我已经尝试修复它3天了。app/index.js被导入到我的routes.js文件中。这是唯一一个进口的地方。只有app文件夹中的所有组件都不会得到热更新，除非它工作正常。我试图用任何样板复制它，但没有成功。

在控制台中我看到

我在我的几个项目上使用react是它通过了，但这是我最后一次看到有react-hot-reload

1. 什么是 react-hot-loader？
2. 它的用途是什么？
3. Webpack 中的热模块替换和 React Hot Loader 之间的区别？
4. 它将给工作流程带来什么优势？
5. 它是如何工作的

谁能给我解释一下：）

这是我的文件 webpack.config.js 。虽然我加了['react-hot' ,'babel']. 但是可以解决。

我已经设法让 webpack 流程正常工作，并且浏览器正在获得热更新。但由于某种原因，我无法理解模块的交换似乎无法正常工作......

这是我的 index.js：

我在 chrome 的控制台中得到了这个：

然而 html 并没有更新，即使我手动来回导航更改也不会通过，只有当我手动重新加载页面时我的更改才会出现。

我究竟做错了什么？

更新：

我的依赖：

我正在尝试react-hot-loader在我现有的应用程序中实现。我遵循了教程，并按照教程中的建议使用了此链接中的样板文件。然后，当我使用 启动节点服务器时yarn start，出现以下错误：

这是我的 webpack 配置文件：

我的package.json文件具有以下配置：

任何想法为什么我会收到上述错误？我试着用谷歌搜索，但找不到任何Cannot resolve module 'webpack/hot/emitter'.

我的应用程序不支持旧版浏览器，我喜欢减少 Babel 转换集以使代码更易于调试（这样调试器中的代码看起来更像原始源代码）。

但是，当我迁移到 react-hot-loader 3 时，这不再有效。也就是说，我可以让 RHL 3 与标准 es2015 预设一起使用，但不能与我的自定义转换集一起使用。发生的情况是反应组件被渲染但从未安装，并且不会响应任何事件。

我尝试使用的一组转换是：

为了回应评论，这里有更多信息：

这是我使用 AppContainer 的方式：

这是我的开发服务器设置：

这是我的 webpack 配置的相关部分：

我使用的是 express 中间件而不是 webpack-dev-server：

我已经尝试过react-hot-loader/patch，react-hot-loader/babel并且react-hot-loader/webpack来自react-hot-loader@3：

但它们似乎都不起作用。我刚刚收到此错误消息：

[HMR] 以下模块无法热更新：（需要完全重新加载）这通常是因为已更改的模块（及其父模块）不知道如何自行热重新加载。有关更多详细信息，请参阅http://webpack.github.io/docs/hot-module-replacement-with-webpack.html。logUpdates@bundle.js:29964 applyCallback@bundle.js:29932（匿名）@bundle.js:29940 bundle.js:29972
[HMR] - ./client/components/CrawlForm.jsx

让它发挥作用的诀窍是什么？

NB CSS 热加载工作得很好，所以我得到了那部分工作。

我之前有这个配置

要添加热加载器，我必须将 'loader' 更改为 'loaders' 但随后遇到 webpack 无法读取查询的问题。修复，我试过这个但没有用

var webpack = require('webpack');

我见过很少有与此类错误相关的帖子。但无法解决我的问题。

我的 package.json：

我在 webpack 上收到以下错误：

但是在我做的时候在cmd行

我得到 3.10.10。react-dom 在那里。但我想知道为什么它仍然给出这个错误。

当我通过 npm "npm install react-dom" 安装 react-dom 并运行 webpack 时，出现以下错误：

请帮忙。