问题标签 [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.
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) {
我在这里错过了什么吗?
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 使用它,这有关系吗?当我无法将商店设为内部并且无法访问减速器时,我该怎么办。
reactjs - 多错误,找不到模块:错误:React Hot Loader@next Universal Rendering
我在用
这是 webpack 客户端配置条目
},
这是服务器/index.js
现在当我运行服务器时npm run build:dev && babel-node -- dist/SSR.js
我收到此错误。
为什么 Webpack Dev 中间件只尝试解析“/app”中的包。
感谢帮助。
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 开发工具控制台中看到的内容:
如您所见,我编辑了 Header.js 的代码,并且更新正常(无需重新加载整个应用程序),但如果我编辑另一个组件,则为独占对于不同于主路由器的路由器/然后重新加载整个应用程序。
reactjs - React 热加载停止了自我更新
我正在尝试使用 react 和 symfony 2.8 实现一个解决方案,但由于我是新手,所以我仍在教程步骤中。一旦我对 react 有足够的了解,我决定尝试将 React 与 symfony 集成,我几乎成功了。我设法获得了一个 symfony 视图来加载反应组件,但无法进行实时编辑,我的意思是,我必须重新启动 webpack 并按 F5 重新加载页面。所以我决定回到我做的教程,看看我做错了什么。当我开始一个新的 react 项目(通过使用“create-react-app projectName”)来查看我失败的地方时,这个项目有同样的问题,我不得不重新加载 webpack,这样我才能看到我所做的更改,我知道这个项目能够实时编辑(因为这是我制作的第一个教程并且当时正在工作),我需要做的就是保存文档,页面应该会自动显示我所做的更改。我认为在这种情况下显示代码并不重要,因为它是一个使用我之前说的命令的新项目,但是您需要的任何东西我都可以尝试向您解释或提供代码。
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 上。
javascript - 带有热重载的 webpack-dev-server 使用 css 更改重新加载整个页面
我有热重新加载没有任何问题,但是每当我进行单个 css 更改时,它都会重新加载整个页面。我希望它注入任何 css 更改,并且理想情况下对 react 组件进行类似的操作,除非确实需要完全重新加载。
** 我得到以下控制台日志 **
网络包配置
index.js
Store.js
随机分量
.babelrc
reactjs - 无法让 React Hot Loader 工作
我正在尝试将 react-hot-loader 配置到我的应用程序中。它建立在 webpack 2、webpack-dev-middleware、browser-sync、express 和服务器端渲染之上。
这是我的 webpack.config
start.js
文件
对于热负载减少器,我已经像这样更改了我的代码,
我们有多个bundle,所以有一个通用的函数来处理入口逻辑,
这是调用上述常用函数的包入口点之一,
不知道我还缺少什么,我尝试关注一些博客文章并对热加载器文档做出反应,但我无法让它工作。
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。
任何帮助表示赞赏,谢谢。