问题标签 [react-hot-loader]

我正在尝试使用 react-hot-loader 设置 webpack 热重载。它似乎大部分都在工作。我在现有的 Rails 应用程序中使用 webpack。

但它不是热重载。每次更改我的反应代码时，它都会触发重新加载。我收到的错误消息是：

这是我的 webpack.hot.config.js 设置：

我运行代码

由于我的 development.rb 文件中有以下设置，rails 开发环境通过 webpack-dev-server 为应用程序资产管道之外的 webpack 文件提供服务。

我一直试图让这个工作好几个小时。任何帮助，将不胜感激。

多谢你们！

I modified the React Hot Loader Boilerplate webpack.config.js so that it will export CSS into a separate file by adding the module:

As well as the plugin:

Here is the full webpack.config file for reference. While this correctly exports app.css when I run webpack, it kills the hot reload functionality for development. If I revert the module to:

Hot reload works fine (adjusted webpack.config).

What is the best setup to easily switch between these two when I'm developing vs. exporting production ready code? In my mind, if I could use npm start (which just calls node server.js) to automatically use development mode, and then run webpack or webpack -p to automatically use production, that would be ideal.

我在 webpack-dev-middleware 上遇到了一些麻烦，而不是使用 react 无状态函数进行热重载，但是如果我创建一个类扩展组件，它就可以正常工作。

例如，这非常有效。

然而，这失败得很惨。

错误：

我在 StackOverflow 和 GitHub 问题上也经历了很多答案，但是，我仍然被困在 Webpack 中的热模块替换中。我npm start用来运行我的服务器webpack-dev-server --hot --inline。我正在尝试更改我的 React 组件中的代码，但浏览器中没有任何反应。

我在 Ubuntu 14.04LTS 上使用 Google Chrome 版本 49.0.2623.87（64 位）。

在我的浏览器console中，我收到的日志消息为

[HMR] 等待来自 WDS 的更新信号...

[WDS] 热模块更换已启用。

但是，没有发生热/实时重新加载。当我更改我的 React 组件文件中的代码时，什么都不会显示。我正在关注本教程的第一个视频Egghead.io/ReactFundamentals，一切正常。

以下是我的 package.json 和 webpack.config.js 文件。

包.json

webpack.config.js

如果有人能指导我解决这个问题，那就太好了，因为我无法进一步有效地学习本教程。

更新我已经在下面发布了答案。

我查看了@gaearon 通过 React Hot Loader 配方（https://github.com/gaearon/react-hot-loader）提供的设置，因为这似乎正是我学习 ES6 和 React 所追求的我想我会用它作为起点。

克隆 repo 让我启动并运行，一切都很棒。然后我注意到两个问题：

1. 它使用v13React，我想使用编写组件的新方法（和使用react-dom）
2. 我也想使用 ES6 的导入方法（例如import { Foo } from Bar;）

所以我想，很简单，我只会更新依赖项以满足我的需求。这是我的 package.json 的摘录：

这导致我对 Webpack 处理捆绑的方式进行了一些小的调整。这是我当前的webpack.config.js文件：

然后我做了一个快速调整，让 React 组件与新方法内联react-dom... 这里是main.js：

以及基本的“hello world”组件本身：

现在在跑步时，npm start我天真地希望这一切都能奏效，我会笑着穿过街道……唉，没有。控制台返回一个我无法区分原因的错误：

我究竟做错了什么？我已经检查了组件的创建，并且一切看起来都是正确的......这是依赖项冲突的问题吗？还是我只是创建了混乱的 webpack 配置？

我已经把我的整个项目放到了 github 上，以便于复制问题，如果这有帮助的话......可以在这里找到：https ://github.com/sheixt/webpack.react-hot-loader

在过去的几天里，我正在潜入“react-redux-webpack”世界，愿意尝试一下并创建一个登录模板。

我已经注入 React Hot Loader 以实现快速视图更新，但它只更新视图以在“requireAuth”部分中解包。

我正在使用componentWillUpdate并componentWillMount检测登录更改。所以我想知道 React Hot Loader 无法将更改推送到视图的原因是什么？因为我看到新数据（在 IDE 中更改/保存后）被拉到浏览器（在 chrome 网络检查器内）。

我将不胜感激，因为我已经尝试过我的想法，但显然在 redux 世界中的两天还不足以快速解决这个问题））

这是我在教程的帮助下构建的“需要身份验证”组件，该组件适用于其目的：

并使用包装的“资源”组件查看，该组件仅在登录后可用：

我正在使用转换类属性。当我更改按钮文本等内容时，一切正常，但是当我修改如下所示的功能时：

在我手动刷新页面之前没有效果。我在控制台中看到一些输出：

但是在我刷新之前我的更改不存在。此功能正在运行（转换类属性），但它对更改是无懈可击的。当我添加类似的东西console.log('foobar');并按下按钮时，什么也没有发生。我的意思是没有新的事情发生。当我更改 ES6 按预期理解 THIS WORKS 的普通类方法语法的语法时，我看到 console.log “live”没有刷新，所以我认为在转译过程中出现了问题。

这是我的 webpack.development.config.js 文件：

我正在尝试新的React Hot Loader 3并且收到一条警告消息：

warning.js:44 警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。检查AppContainer.

这是应用程序文件。怎么了？
ps：写法和例子一样。
Ps2：问题不在应用程序中，因为它在 if 语句之外的 render() 上呈现
Ps3：警告仅在浏览器尝试“热重载”时出现（当我对任何文件进行更改时）

我正在尝试使用react-hot-loaderand webpack-dev-server，react-router但是当我尝试访问 localhost:3000/ 时，我得到：

Cannot GET /

当然，当我尝试访问 localhost:8000/ 时它可以工作。我试图遵循react-hot-boilerplate，但没​​有成功。

这是我的代码：

服务器.js

routes.js（所以所有路由都指向路由器）

webpack.config.js

脚本

主要内容.html

入口点

我怎样才能react-hot-loader工作？

提前致谢。

我可以让 webpack 运行并连接服务器，但我在浏览器中看到的只是一条无法 GET 消息。有人可以看看他们是否能发现我在哪里弄乱了配置。我所有的组件都在一个名为 public 的文件中，因此与 webpack.config.js 文件相关的是'./public'

webpack.config.js

服务器.js