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包而不是标准的react-dom

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

但就我个人而言，我有点担心这一点，因为react-dom是任何react-based应用程序的核心部分。此外，根据一些相关的问题和代码注释，这可能只是一个短期的解决方案，以支持钩子等新的react功能。

所以我想有两个选择：

再等一段时间，看看他们是否会放弃这个要求(也许会遇到一些让loading).

• Follow
• instructions摆脱警告的边缘情况)。

更新

您可以禁用警告，如下所示：

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

setConfig({
    showReactDomPatchNotification: false
})

Answer 2

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

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

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

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

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

Answer 3

更新2020

自2020年夏季起，这是Gatsby's GitHub repository上推荐的当前解决方案

第一步

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

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