React-hot-loader：未检测到react-dom补丁

Question

React-hot-loader：未检测到react-dom补丁

reactjsgatsbyreact-hot-loader

53

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

React-hot-loader: react--dom 补丁未检测到。React 16.6+ 的功能可能无法正常工作。

然而，当我查看源代码时，发现有一个注释：

// 实际上一切都正常...

这个警告实际上是什么意思？我应该修复它还是让它保持不变？

- Atte Juvonen

我注意到了相同的事情。 - mohanaravind

1

可能与 https://github.com/gaearon/react-hot-loader/issues/1088 相关的编程内容。 - roadev

我也遇到了这个问题。看起来它似乎在寻找这个包： https://github.com/hot-loader/react-dom - Greg Venech

6个回答

11

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

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

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

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

想要获取更多信息，请阅读其文档.

- AmerllicA

10

2020年更新

截至2020年夏季，这是在Gatsby的GitHub存储库上建议的当前解决方案:

第一步

运行此命令-但是仅运行此命令不能解决问题：

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。警告消失了。

- EliteRaceElephant

5

这似乎是开发过程中的一个遗留问题。看起来在这种情况下有些来回讨论。错误消息被注释掉，然后又作为修复问题的一部分添加回来：https://github.com/gaearon/react-hot-loader/commit/efc3d6b5a58df77f6e0d5ca21bef54e8f8732070。

所以，这似乎只是一个轻微的警告，除非您需要特定的功能，否则您可能会很好。建议向维护者询问此事的明确性，因为他们似乎也有点困惑 :)

- Garrett Motzner

3

简而言之，React-Hot-Loader可能会出现“无法正常工作”的情况。它有很多问题和限制。

“热修补”旨在（首先）支持新的React功能，其次使其更加稳定。

如果没有这个补丁-某些东西确实可能无法正常工作。
有了此补丁-某些东西可能会更好地工作，特别是在未来。

这是缓解RHL主要问题的唯一希望（好吧，是我的希望），并被追踪为“版本5” - https://github.com/gaearon/react-hot-loader/milestone/3 hot-loader / react-dom 不是“第三方”库-它与应用到dev mode 的一些补丁相同的react-dom（您可以查看构建脚本）。

它只是将RHL用于工作的某些黑魔法移动到react中，并实际上删除它。 RHL ==黑魔法。 RHL + 补丁 ==减少一半的魔力。

- Anton Korzunov

2

2020年末更新

在第一步中，您应该按照以下方式运行它：

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

由于 Gatsby 使用 React 版本 ^16.12.0，如果在不指定 React 版本的情况下运行上面的命令，则会安装 ^17.0.1 版本，该版本不兼容 ^16.x 版本。

- cl3m3c7

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Greg Venech · Accepted Answer

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

就个人而言，我有点担心更换它，因为react-dom是任何基于react的应用程序的核心部分。此外，根据一些链接问题和代码注释，看起来这只是支持新的react功能（如hooks）的短期解决方法。

所以我想有两个选择：

稍等一会儿看他们是否放弃这个要求（也许会遇到一些热加载边缘情况）。
按照说明来消除警告。

更新

您可以这样禁用警告：

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

setConfig({
    showReactDomPatchNotification: false
})