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

Question

我在Gatsby项目中更新了一些npm软件包,现在我在控制台中看到了这个警告:

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

但是,当我查看源代码时,有一个评论:

// Actually everything works...

这个警告实际意味着什么？这是我应该解决的问题还是让它成为现实？

Answer 1

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

• https://github.com/gaearon/react-hot-loader#react--dom
• https://github.com/hot-loader/react-dom

就我个人而言，我有点担心将其交换出去，因为它react-dom是任何react基于应用程序的核心部分。似乎也基于一些链接的问题和代码注释，这也许是支持钩子之类的新反应功能的短期解决方案。

所以我想有两种选择：

• 等待一会儿，看看是否满足要求（并且可能遇到一些边缘情况进行热加载）。
• 请按照说明摆脱警告。

更新资料

您可以像这样禁用警告：

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

setConfig({
    showReactDomPatchNotification: false
})

Answer 2

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

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

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

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

有关更多信息，请阅读其文档。

Answer 3

2020 年更新

截至 2020 年夏季，这是Gatsby 的 GitHub 存储库上推荐的当前解决方案：

第1步

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

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

第2步

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

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

重新启动gatsby develop。警告消失了。

Answer 4

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

因此，它看起来像是一个小警告，除非您需要特定功能，否则您可能会很好。

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