react-hot-loader: 未检测到 react-????-dom 补丁答案

【问题标题】：React-hot-loader: react-????-dom patch is not detectedreact-hot-loader: 未检测到 react-????-dom 补丁
【发布时间】：2019-07-13 05:02:16
【问题描述】：

我在我的 Gatsby 项目中更新了一些 npm 包，现在我在控制台中看到了这个警告：

React-hot-loader: react-????-dom patch is not detected. React 16.6+ features may not work.

但是，当我查看源代码时，有一条注释：

// Actually everything works...

这个警告实际上是什么意思？这是我应该解决的问题还是顺其自然？

【问题讨论】：

我也注意到了
可能与github.com/gaearon/react-hot-loader/issues/1088有关
也看到了这个问题。它似乎在寻找这个包：github.com/hot-loader/react-dom

标签： reactjs gatsby react-hot-loader

【解决方案1】：

所以这似乎是开发过程的产物。看起来在这种情况下该怎么做有一些反复。错误消息已被注释掉，然后作为问题的修复添加回来：https://github.com/gaearon/react-hot-loader/commit/efc3d6b5a58df77f6e0d5ca21bef54e8f8732070。

因此，这似乎是一个小警告，除非您需要特定功能，否则您可能会很好。

向维护人员询问清楚这一点可能是个好主意，因为他们自己似乎有点困惑:)

【讨论】：

【解决方案2】：

根据我上面的评论，看起来react-hot-loader 想要@hot-loader/react-dom 包而不是标准的react-dom：

虽然react-dom 是任何基于react 的应用程序的核心部分，但我个人有点担心将其换掉。此外，似乎基于一些链接的问题和代码 cmets，这可能只是支持新反应功能（如钩子）的短期解决方法。

所以我想有两个选择：

稍等片刻，看看他们是否会放弃该要求（并且可能会遇到一些热加载的边缘情况）。
关注instructions 以消除警告。

更新

您可以像这样禁用警告：

import { hot, setConfig } from 'react-hot-loader'

setConfig({
    showReactDomPatchNotification: false
})

【讨论】：

@gaearon 是 React 的开发人员，因此没有理由担心将 react-dom 换成替代方案请参阅：github.com/gaearon
首先，我的评论不是说它应该是一个安全问题，而是更多的是我不想使用核心包的分支（例如，他们可能忘记保持最新）。其次，虽然该包仍在他的命名空间下，但@gaearon 不是当前的维护者。请参阅latest contributor graphs。
一个有效的观点是，他不是提交最近大部分代码的人，但@gaearon 不会以他的名义托管它，除非他有信心这样做。他们可能会忘记更新带有 11k 星的软件包的想法，托管在我觉得有点荒谬的地方。 Lastly, he's very involved in the comments, even if not in the commits.
公平点，虽然我不一定会conflate stars with update frequency。叉子本身也只有has ~70 stars，这可能表明没有多少人在使用它。无论如何，我认为您的 cmets 为另一种方法提供了公平的论据。您是否建议我编辑答案？我确实说过“个人”，尽管有你的批评，我仍然有这种感觉（尽管如此）。
@SkipJack 如果您使用 'react-hot-loader/root' 中的 `import {hot} 无论如何可以这样做吗？文档建议使用较新的根导入，因为它对 JS 错误更具弹性。 github.com/cdharris/react-app-rewire-hot-loader

【解决方案3】：

简而言之 - React-Hot-Loader 是“可能不起作用”的东西。它有很多问题和局限性。

创建“hot-patch”是为了（第一）支持新的 React 功能，（第二）使其更稳定。

如果没有这个补丁 - 某些东西真的可能行不通。
使用补丁 - 某些东西可能会更好，尤其是在未来。

这是我们（好吧，我的）唯一希望缓解 RHL 存在的主要问题，并被跟踪为“版本 5”-https://github.com/gaearon/react-hot-loader/milestone/3

hot-loader/react-dom 不是“第三方”库 - 它与 react-dom 相同，但仅对 dev mode 应用了一些补丁（您可以检查构建脚本）。

它只是移动了一些黑魔法，RHL 用来工作，内部反应，并实际上将其移除。 RHL == 黑魔法。 RHL + patch == 魔法减少两倍。

【讨论】：

【解决方案4】：

您需要根据您的 ReactJS 版本将@hot-loader/react-dom 添加到您的项目中，注意以下命令：

yarn add @hot-loader/react-dom@[YOUR_REACT_VERSION]

然后需要在你的 Webpack 配置文件中为其添加解析别名：

resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
}

欲了解更多信息，请阅读其docs。

【讨论】：

【解决方案5】：

2020 年更新

截至 2020 年夏季，这是Gatsby's GitHub repository 推荐的当前解决方案：

步骤 1

运行此命令 - 但单独运行此命令并不能解决问题：

npm install -D @hot-loader/react-dom
// or
yarn add -D @hot-loader/react-dom

第二步

修改gatsby-node.js添加以下内容：

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage.startsWith("develop")) {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          "react-dom": "@hot-loader/react-dom",
        },
      },
    })
  }
}

重启gatsby develop。警告消失了。

【讨论】：

【解决方案6】：

2020 年底更新

在第1步中，您应该按如下方式运行它：

npm i @hot-loader/react-dom@YOUR_REACT_VERSION

因为 gatsby 使用 react 版本 ^16.12.0，并且运行上面的命令时没有指定 react 版本，安装 ^17.0.1 与 ^16.x 版本不兼容。

【讨论】：