问题标签 [react-hot-loader]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
850 浏览

javascript - Webpack 2 Hot-reload Error TypeError: Cannot read property 'filter' of undefined

我刚刚为我的 React 项目从 Webpack 1.x 升级到了 Webpack 2.x,一切运行良好,除了热重载。我遇到的问题是,每次我更新项目中的文件时, HotModuleReplacementPlugin 都会出现错误Error TypeError: Cannot read property 'filter' of undefined

我已经设法找到了这个问题,在我看来这就像 HotModuleReplacementPlugin.js 中的一个错误,但我想确保我没有在我的配置中做一些奇怪的事情(即我没有对构建进行分块,这可能会导致这个?) 在作为 Webpack 存储库中的问题/公关提出之前。

第 113 行 HotModuleReplacementPlugin.js 中的代码在我的构建中var currentChunk = this.chunks.find(chunk => chunk.id === chunkId);返回-1,而不是 Chunk 对象,这是该行之后的逻辑所依赖的。

我已经能够通过将第 114 行的 if 语句从更改为来“修复”我的本地版本,if(currentChunk) {但是if(currentChunk && currentChunk.modules) {我在这里错过了什么吗?

0 投票
1 回答
366 浏览

webpack - react-hot-loader 与外部 configureStore 使用 redux-saga 抛出“regeneratorRuntime 未定义”

我正在将 react-hot-loader 添加到我的项目中。我的项目使用 webpack2、babel7、react-hot-loader3 和 webpack-dev-server。启动应用程序时出现“ regeneratorRuntime is not defined ”错误。我使用这个样板作为示例。我没有使用下面的代码,因为我的 configureStore 是外部的,我没有组合减速器的访问权限(商店应用了 redux-saga 中间件)。

据我所知,regeneratorRuntime 是从 es6 编译生成器的 babel,redux-saga 使用它,这有关系吗?当我无法将商店设为内部并且无法访问减速器时,我该怎么办。

0 投票
0 回答
857 浏览

reactjs - 多错误,找不到模块:错误:React Hot Loader@next Universal Rendering

我在用

这是 webpack 客户端配置条目

},

这是服务器/index.js

现在当我运行服务器时npm run build:dev && babel-node -- dist/SSR.js

我收到此错误。

为什么 Webpack Dev 中间件只尝试解析“/app”中的包。

感谢帮助。

0 投票
0 回答
218 浏览

react-router - Webpack HMR 在某些路由中重新加载整个应用程序

首先,我正在使用:

  • “反应路由器”:“3.0.2”,
  • 浏览器同步": "2.18.8",
  • "url-loader": "0.5.7",
  • "webpack": "1.13.1",
  • "webpack-dev-middleware": "1.6.1",
  • "webpack-hot-middleware": "2.12.2",
  • “材料-ui”:“0.17.0”,

好的,现在 Webpack HMR 仅在我编辑作为主路由一部分的 reactjs 组件时才起作用,我的意思是:myurlapp.com/

但是如果一个组件是另一个路由的一部分,例如:myurlapp.com/form然后整个应用程序被重新加载。这是为什么?

我的根 js 是这样的:

routes.js 是这样的:

顺便说一下,这是 webpack 的条目:

我应该显示什么其他代码?这就是我在 Chrome 开发工具控制台中看到的内容: 开发工具中的 HMR 如您所见,我编辑了 Header.js 的代码,并且更新正常(无需重新加载整个应用程序),但如果我编辑另一个组件,则为独占对于不同于主路由器的路由器/然后重新加载整个应用程序。

0 投票
0 回答
47 浏览

reactjs - React 热加载停止了自我更新

我正在尝试使用 react 和 symfony 2.8 实现一个解决方案,但由于我是新手,所以我仍在教程步骤中。一旦我对 react 有足​​够的了解,我决定尝试将 React 与 symfony 集成,我几乎成功了。我设法获得了一个 symfony 视图来加载反应组件,但无法进行实时编辑,我的意思是,我必须重新启动 webpack 并按 F5 重新加载页面。所以我决定回到我做的教程,看看我做错了什么。当我开始一个新的 react 项目(通过使用“create-react-app projectName”)来查看我失败的地方时,这个项目有同样的问题,我不得不重新加载 webpack,这样我才能看到我所做的更改,我知道这个项目能够实时编辑(因为这是我制作的第一个教程并且当时正在工作),我需要做的就是保存文档,页面应该会自动显示我所做的更改。我认为在这种情况下显示代码并不重要,因为它是一个使用我之前说的命令的新项目,但是您需要的任何东西我都可以尝试向您解释或提供代码。

0 投票
0 回答
378 浏览

express - 带有 React Hot Loader 的 Webpack 开发服务器在用作中间件时不解析 JSX

我在尝试让 webpack-dev-middleware/webpack-hot-middleware 与我的快速服务器一起工作时遇到了障碍。如果我直接运行 webpack 配置,它运行良好,但是当我尝试从中间件运行它时,它不会解析 JSX。

这是我的配置

这是我的中间件 app.js 钩子

这是我在运行服务器时看到的错误

webpack/hot/only-dev-server webpack-hot-middleware/client?quiet=true ./lib/ui/index.js 76 bytes {0} [built] + 260 hidden modules

webpack/hot/only-dev-server webpack-hot-middleware/client?quiet=true ./lib/ui/index.js

当我直接运行 webpack 配置时,它构建没有任何错误。请帮助,我完全被卡住了。我在 react-hot-loader 的 v3 上。

0 投票
1 回答
1835 浏览

reactjs - 无法设置 # 的属性 createElement which is only a getter

Description

What you are reporting: I am following this set of instructions on how to

Description

What you are reporting: I am following this set of instructions on how to setup React hot loarder. But when I go to step 3 where I put the patch, it breaks in to the one below.

Expected behavior

What you think should happen: Should work properly

Actual behavior

image

Environment

React Hot Loader version: next

Run these commands in the project folder and fill in their results:

  1. node -v: 7.9.0
  2. npm -v: 4.2.0

Then, specify:

  1. Operating system: Windows 10
  2. Browser and version: Latest Chrome

Reproducible Demo

https://github.com/abarcenas29/preact-sandbox-v0/blob/wip/hot-reloader/src/main.js

branch: wip-hot-reloader

Instructions:

  • yarn
  • yarn run postinstall
  • yarn run start:dev

Route users to different paths according to information entered in rails

My userinfos controller handles user information. As soon as the user signs up, I want them to go to the page that lets them fill out the user information like name, email, gpa, college...Lets just say they leave before completing the form, when they sign in again, I want to check if the user information has been filled out, if not, I want to take them to enter the new information page. To do this, I added the "info_complete" function to my userinfo model(as shown below). Here are my two models which will tell you the relationship between them.

Userinfo model:

User model:

Then I added the following code to the application controller. My application controller:

When I try to log in after saving this, I get the following error:enter image description here

Full error trace:

Any help is appreciated. Thanks!

0 投票
2 回答
4590 浏览

javascript - 带有热重载的 webpack-dev-server 使用 css 更改重新加载整个页面

[编辑] Github Test Repo 为您创建测试!


我有热重新加载没有任何问题,但是每当我进行单个 css 更改时,它都会重新加载整个页面。我希望它注入任何 css 更改,并且理想情况下对 react 组件进行类似的操作,除非确实需要完全重新加载。

** 我得到以下控制台日志 **

网络包配置

index.js

Store.js

随机分量

.babelrc

0 投票
1 回答
564 浏览

reactjs - 无法让 React Hot Loader 工作

我正在尝试将 react-hot-loader 配置到我的应用程序中。它建立在 webpack 2、webpack-dev-middleware、browser-sync、express 和服务器端渲染之上。

这是我的 webpack.config

start.js文件

对于热负载减少器,我已经像这样更改了我的代码,

我们有多个bundle,所以有一个通用的函数来处理入口逻辑,

这是调用上述常用函数的包入口点之一,

不知道我还缺少什么,我尝试关注一些博客文章并对热加载器文档做出反应,但我无法让它工作。

0 投票
1 回答
1144 浏览

webpack - 无法让多应用 webpack 配置与 react-hot-loader 一起使用

我有一个基本设置,两个应用程序分别位于一个单独的目录中,我使用自定义服务器使用webpack-dev-middleware/编译它们webpack-hot-middleware。除了我无法让 HMR 为第二个应用程序工作(我正在使用react-hot-loader)之外,一切都运行良好。

这是说明问题的最小回购:https ://github.com/AmrN/multi-react-app-hmr

我的主要代码文件:

webpack.config.js

服务器.js

(app1|app2)/index.js

现在如果我运行服务器,我的文件编译正确,可以访问http://localhost:3000/app1/index.html成功,HMR在这里工作正常。但是,如果我访问http://localhost:3000/app2/index.html它打开的第二个应用程序,但 HMR 无法正常工作并查看控制台,它会给我以下错误:

GET http://localhost:3000/app2/640a44b6b47b67436af2.hot-update.json 404(未找到)

[HMR] 找不到更新(需要完全重新加载)

[HMR](可能是因为重启了服务器)

我注意到的另一件事是更改我在 server.js 中应用我的应用程序 webpack 配置的顺序:

[config1, config2].forEach((config) => {...})

到:

[config2, config1].forEach((config) => {...})

将问题切换到 app1,现在 HMR 适用于 app2 但不适用于 app1。

任何帮助表示赞赏,谢谢。