问题标签 [react-refresh]

没有太多关于新的 react-refresh 的信息，我想开始使用它。没有关于如何从 react-hot-reload 迁移的信息。

我试图在这里搜索/Google/GitHub，但我什至不知道如何寻找它。无论我使用什么词，它们都会向我展示如何实施 HMR 的结果。但这不是我的问题。我只想在 React 快速刷新（热模块重新加载）刷新时在浏览器控制台上打印，所以我知道它已更新。

我将 React 与 Snowpack 和react-refresh 插件一起使用。

更改后，snowpack 开发服务器重新编译正确，浏览器收到 HMR 更新信号 - 但内容没有重新加载，更改仅在手动重新加载页面后可见。

我已经用 Firefox、Chrome 和 Brave 进行了测试。

根据文档，除了包含插件之外，您无需配置任何其他内容。

有人有想法吗？将不胜感激！

我正在使用https://github.com/pmmmwh/react-refresh-webpack-plugin，它适用于反应组件。但有时我会直接更新与组件无关的代码，然后我只会[HMR] Nothing hot updated在控制台中看到一条消息。要使用代码，我必须重新加载页面。是否可以配置工具在“没有热更新”时自动刷新页面？谢谢。

问题

• 它正在加载整个页面

• 操作系统： macOS Big Sur 11.2

• 节点版本： v14.15.4

• NPM 版本： 6.14.10

• webpack 版本： ^5.19.0

• webpack-dev-server 版本： ^4.0.0-beta.0

• 浏览器： 谷歌浏览器版本 88

• [x] 这是一个错误

代码

存储库链接：https ://github.com/Ridermansb/webpack5Hot

• master分支它只使用基本的 webpack-dev-server 配置，没有任何插件
• react-hot-loader分支它使用react-hot-loader插件。拉取请求 #1
• react-refresh-webpack-plugin分支它使用pmmmwh/react-refresh-webpack-plugin webpack 插件。拉取请求 #2

预期行为

在所有情况下......不应该重新加载页面，只重新加载已更改的部分

实际行为

它总是重新加载整个页面。

我们如何重现这种行为？

只需克隆存储库Ridermansb/webpack5Hot

• npm install
• npm start

并尝试更新Header组件

Uncaught Error: React Refresh runtime should not be included in the production bundle.

默认情况下，当您执行 a 时npm run build，它会将环境更改为“生产”。查看 react-refresh 后，如果环境处于生产状态，则会引发不应包含的错误。

我已经.env使用这些环境变量设置了一个文件，但是当我在本地构建和提供它时，我仍然遇到问题。在阅读了这个问题之后，我注意到设置环境变量应该可以解决这个问题，但它对我不起作用。

有人可以帮我解决这个问题吗？

我有一个打字稿反应项目，我尝试添加 react-refresh-webpack-client 并收到此错误：

我的 webpack 配置：

这是我的 tsconfig 文件：

我已经从我的代码中删除了 react-hot-loader。找不到任何带有打字稿的反应刷新示例，我错过了什么？什么可能是我的问题？谢谢你！

我有兴趣在不涉及 Node.Js 的情况下在浏览器中使用 react-refresh。我当前的开发服务器提供静态文件（本机 es 模块），并且可以检测文件何时更改。此更改检测通过 SSE 传达给浏览器。

我想使用像 Skypack 这样的 CDN 来加载 react-refresh 并启用运行时。

我在https://github.com/facebook/react/issues/16604#issuecomment-528663101阅读了 Dan 的初始指南，但我不确定如何将所有内容拼凑在一起。

我需要做什么才能为已安装的组件启用 react-refresh？如何让浏览器知道导入的模块/组件应该重新导入？

我需要用任何东西将我的组件包装在我的模块中吗？这部分最让我困惑。想象一下我有一个像这样的组件：

为了让它与react-refresh一起玩，需要发生什么？

我的主要入口点 index.js 模块看起来像

以最简单的形式，我想在加载组件的地方进行概念验证。在本地更改它并在某处按下按钮以模仿文件更改的 SSE。然后单击按钮应调用 react-refresh 并且已安装的 App 组件应反映更改。

我们目前正在开发一个小型应用程序，它只呈现一个外部 React 组件（外部因为它是npm installed）。这个应用程序的目的是获取一些 JSON 配置并将其作为 prop 传递给该组件以演示其用法。

这个应用程序是由 create-react-app 创建的，它对脚手架应用程序的唯一更改是 index.tsx 和 App.tsx 文件的内容。好吧，还有两个 JSON 文件添加到 public 目录。

问题：编译失败。

现在的问题是，这个项目在我同事的机器上编译和运行，而不是在我的机器上。之后npm ci，npm start我得到以下信息：

大问号

我寻求支持的原因是：在任何这些文件中都没有明确导入“react-refresh”。提到的 index.tsx 看起来像

我的方法

到目前为止，我成功地尝试了

• 运行FAST_REFRESH=false npm start（这实际上是由 react-refresh 提供的快速刷新）
• 创建一个新的 React 应用程序 ( npx create-react-app@latest my-react-app --template typescript) 并将文件内容复制到新应用程序

创建一个新目录并执行以下操作无效：

真正困扰我的是什么

• 两位同事使用 Windows，另一位和我正在运行 Linux（Manjaro 和 Ubuntu）。Windows 工作正常，该问题仅发生在 Linux 上。但到目前为止，我没有发现任何暗示操作系统可能是原因（所有文件都使用 LF 结尾，在 上没有找到特殊文件属性ls -la）。

• import错误消息中的行（第 7 行和第 9 行）与文件中的语句不匹配index.tsx。所以我猜编译过程会进行一些注入以实现快速刷新。是否可以打印这个更改的文件？

• 有三个错误消息，但只有两个进位行号。当我禁用and （并相应import地更改用法）时，只有一个编译错误仍然在抱怨找不到模块。但它没有说明它所指的行：AppreportWebVitals

结论

我不知道为什么会这样。以及为什么这似乎只发生在 Linux 上。我已经尝试过rm -rf该项目，一次git clone又一次。但这没有用。npm cache clean --forcenpm ci

有没有人有一些 React、React 编译和 react-refresh 见解能够给出如何缩小这个问题的提示？

我在我的配置中添加了react-refresh和。如果我直接在组件中更改某些内容，一切正常。例如，我添加了一个新的 jsx。HMR 工作正常。当我想更改组件使用的文件中的样式时，就会出现问题。然后我必须手动刷新页面才能看到新的变化，这可能很烦人。react-refresh-webpack-pluginwebpackmodule.less

我需要做什么才能使 react-refresh 也响应css/less文件中的更改？也许我需要直接在 webpack 配置中添加一些东西？

在我使用的另一个项目vite中，一切都适用于 js 和 css 文件。