Gatsby: React-Hot-Loader：未检测到 react-🔥-dom 补丁。 React 16.6+ 功能可能无法使用。

创建于 2019-02-20 · 52评论 · 资料来源: gatsbyjs/gatsby

描述

更新我的启动项目的所有依赖项后，我在运行gatsby develop后在浏览器控制台中注意到以下消息：

React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.

重现步骤

克隆gatsby-starter-strict@6c06471
yarn && yarn develop

预期结果

不应抛出任何警告。

实际结果

即使是启动项目也会引发警告。

环境

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-2500 CPU @ 3.30GHz
  Binaries:
    Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    gatsby: ^2.1.10 => 2.1.10
    gatsby-plugin-manifest: ^2.0.18 => 2.0.18
    gatsby-plugin-offline: ^2.0.24 => 2.0.24
    gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6
    gatsby-plugin-styled-components: ^3.0.6 => 3.0.6
    gatsby-plugin-typescript: ^2.0.8 => 2.0.8

not stale maintenance

资料来源

kripod

👍108

最有用的评论

这与“反应火”完全无关，表情符号令人困惑。

可以在本地完成的解决方法是将@hot-loader/react-dom安装为devDependency并将此挂钩添加到gatsby-node.js ：

exports.onCreateWebpackConfig = ({ getConfig, stage }) => {
  const config = getConfig()
  if (stage.startsWith('develop') && config.resolve) {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-dom': '@hot-loader/react-dom'
    }
  }
}

Jessidhia 于 2019-03-03

👍90 ❤28 🎉17 👎1

所有52条评论

我可以确认我也看到了这个警告。我还能够使用 gatsby-starter-default 重现此警告。

t2ca 于 2019-02-20

👍34 😕2 😄2

我们可能缺少https://github.com/gaearon/react-hot-loader/tree/7089062eac273832102c074a368d5af27e23e0b0#webpack -plugin

这不是什么大问题 atm 因为 react fire :fire: 还不是官方的。

Webpack.config 在这里：
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js

wardpeet 于 2019-02-20

@wardpeet我将react-dom替换@hot-loader/react-dom以删除此警告。

achmadk 于 2019-02-25

👍12 👎4

这也有效！ 💪

wardpeet 于 2019-02-25

👎9

@achmadk @wardpeet你在哪里用 react-dom 替换了
@hot-loader/react-dom ？
我没有在我的代码库中看到它，它应该在 gatsby 代码中的某个地方

JustFly1984 于 2019-03-01

例如@JustFly1984 ，我使用来自@kripod 的代码库。在package.json文件中， react-dom里面有dependencies 。然后用react-dom替换@hot-loader/react-dom 。

achmadk 于 2019-03-01

😕3 👎3 👍2

我用 gatsby-starter-default 重现了这个警告。

那么，我们应该怎么做？

等待“反应火力”发布？或者用@hot-loader/react-dom替换react-dom @hot-loader/react-dom ？

asilgag 于 2019-03-02

这与“反应火”完全无关，表情符号令人困惑。

可以在本地完成的解决方法是将@hot-loader/react-dom安装为devDependency并将此挂钩添加到gatsby-node.js ：

exports.onCreateWebpackConfig = ({ getConfig, stage }) => {
  const config = getConfig()
  if (stage.startsWith('develop') && config.resolve) {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-dom': '@hot-loader/react-dom'
    }
  }
}

Jessidhia 于 2019-03-03

👍90 ❤28 🎉17 👎1

解决方法删除了警告，但..
现在没有热重载吗？（保存文件将刷新我的应用程序页面）

misterbridge 于 2019-03-05

👍7 😕1

嗨！

这个问题已经沉寂了。诡异的安静。 👻

我们遇到了很多问题，因此我们目前在 30 天不活动后关闭问题。距离上次更新已经过去了至少 20 天。

如果我们错过了这个问题，或者如果您想保持打开状态，请在此处回复。您还可以添加标签“not stale”以保持此问题的开放性！

感谢您成为 Gatsby 社区的一员！ 💪💜

gatsbot[bot] 于 2019-03-26

👎12

不陈旧！

JustFly1984 于 2019-03-26

👍20 😄3

我已将其添加到我们的路线图中，因为它可能会抛出新人，这可能会给他们留下他们做错了什么的印象。

wardpeet 于 2019-03-27

👍18

只是要清楚，我们应该从应用变通方法中得到什么？这会像@misterbridge注意到的那样移除热重载吗？有没有人找到保持热重载工作的解决方法？

joefiorini 于 2019-04-12

让我尽快解决这个问题

wardpeet 于 2019-04-15

👍36

我创建了一个新的 PR https://github.com/gatsbyjs/gatsby/pull/13713如果这可以在几个 repos 上进行测试会很有趣。

wardpeet 于 2019-04-30

👍2

看起来这已在 #13713 中修复

m-allanson 于 2019-05-20

我们是否仍然需要exports.onCreateWebpackConfig补丁来删除最后一个 gatsby 版本中的警告？或者我们可以忽略警告吗？

使用 React 16.9.0

antoinerousseau 于 2019-08-11

👍3

好像又回来了

vasilenka 于 2019-08-11

👍19

我也在新的入门项目中看到了这一点。

rileyjshaw 于 2019-08-13

您需要在包文件中添加 react-hot-dom 的匹配版本

"@hot-loader/react-dom": "^16.8.6",

在你的 webpack 配置中，你需要添加

别名：{'react-dom':'@hot-loader/react-dom'}

TheAadithyan 于 2019-08-15

👍2

由于它并没有真正破坏任何东西，因此隐藏警告通常是安全的，如我回答的这个堆栈溢出问题中所述：

https://stackoverflow.com/questions/54770535/react-hot-loader-react-dom-patch-is-not-detected/54816859#54816859

如果有人可以确认以下几行是进行更改的正确位置，我将准备提交 PR：

https://github.com/gatsbyjs/gatsby/blob/561d33e2e491d3971cb2a404eec9705a5a493602/packages/gatsby/src/bootstrap/requires-writer.js#L50 -L63

我对 Gatsby 有点陌生，但我认为这将是一个相当简单的更改，不需要用户从核心react-dom包中迁移。

skipjack 于 2019-08-22

@TheAadithyan的修复有效。虽然有点烦...

GooBall 于 2019-10-02

遵循Gatsby API ，最好使用actions.setWebpackConfig ，例如

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

它会自动与默认配置合并。

antoinerousseau 于 2019-10-05

👍14

@antoinerousseau和@ooloth ：该补丁是一个不幸的副作用，因为当使用react-modal从本地文件系统安装了使用file:[path to project]的包时，它会导致项目无法编译。真正奇怪的是，从我们的 Azure DevOps 工件安装时，相同的代码运行良好。

删除补丁时不会出现此问题。我已经用react-modal作为依赖项的两个不同项目对此进行了测试，并且都因相同的错误而失败。 react-modal对react-dom react-modal有依赖性，但在应用上述补丁时无法解决它。

示例存储库

有关示例存储库，请参阅https://github.com/collector-bank/collector-portal-framework。

如何繁殖

使用file:..安装一个依赖于react-modal的本地包。
运行npm run start 。
观察编译失败并出现类似错误，如下所示：

» npm run start                                                                                                                    [removed for privacy reasons]@Eriks-MBP

> [email protected] start /Users/[removed for privacy reasons]/Projects/[removed for privacy reasons]/FooProject
> npm run develop


> [email protected] develop /Users/[removed for privacy reasons]/Projects/[removed for privacy reasons]/FooProject
> gatsby develop

success open and validate gatsby-configs - 0.029 s
success load plugins - 0.247 s
success onPreInit - 0.015 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success initialize cache - 0.031 s
success copy gatsby files - 0.049 s
success onPreBootstrap - 0.020 s
success source and transform nodes - 0.098 s
success Add explicit types - 0.018 s
success Add inferred types - 0.099 s
success Processing types - 0.075 s
success building schema - 0.250 s
success createPages - 0.014 s
success createPagesStatefully - 0.055 s
success onPreExtractQueries - 0.016 s
success update schema - 0.032 s
success extract queries from components - 0.231 s
success write out requires - 0.027 s
success write out redirect data - 0.013 s
success Build manifest and related icons - 0.104 s
success onPostBootstrap - 0.127 s
⠀
info bootstrap finished - 3.117 s
⠀
success run static queries - 0.058 s — 3/3 67.58 queries/second
success run page queries - 0.028 s — 5/5 365.36 queries/second
success start webpack server - 1.300 s — 1/1 7.17 pages/second
 ERROR  Failed to compile with 2 errors                                                                                                          09:36:39
⠀
This dependency was not found:
⠀
* react-dom in /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/components/Modal.js, /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-onclickoutside/dist/react-onclickoutside.es.js
⠀
To install it, you can run: npm install --save react-dom

 ERROR 

✖ ｢wdm｣:
ERROR in /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/components/Modal.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/components'
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/components/Modal.js 16:16-36
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/index.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/components/Modal/index.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/components/index.js
 @ ./src/components/layout.tsx
 @ ./src/pages/page-2.tsx
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/event-source-polyfill/src/eventsource.js (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-onclickoutside/dist/react-onclickoutside.es.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-onclickoutside/dist'
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-onclickoutside/dist/react-onclickoutside.es.js 2:0-40 199:15-26
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-datepicker/dist/react-datepicker.min.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/common/components/DatePicker/index.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/common/components/index.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/components/index.js
 @ ./src/components/layout.tsx
 @ ./src/pages/page-2.tsx
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/event-source-polyfill/src/eventsource.js (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

info ℹ ｢wdm｣: Failed to compile.

eriktoyra 于 2019-10-08

这与“反应火”完全无关，表情符号令人困惑。
可以在本地完成的解决方法是将@hot-loader/react-dom安装为devDependency并将此挂钩添加到gatsby-node.js ：
exports.onCreateWebpackConfig = ({ getConfig, stage }) => {
  const config = getConfig()
  if (stage.startsWith('develop') && config.resolve) {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-dom': '@hot-loader/react-dom'
    }
  }
}

之后我不得不重新编译，但它起作用了！

prevolorio 于 2019-10-12

👎3

@prevolorio你读过这个帖子吗？...

antoinerousseau 于 2019-10-12

遵循Gatsby API ，最好使用actions.setWebpackConfig ，例如

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

它会自动与默认配置合并。

新人来了。我把这段代码放在哪里？ gatsby-node.js？

TriStarGod 于 2019-10-29

👍1

@TriStarGod是的，这就是 api 钩子“存在”的地方。该代码片段应插入gatsby-node.js

jonniebigodes 于 2019-10-29

@TriStarGod它在我链接的页面上说得很好...

用法：通过从项目根目录中名为 gatsby-node.js 的文件中导出这些 API 来实现这些 API。

antoinerousseau 于 2019-10-29

我也在 Windows 10 上收到此警告，但在 Ubuntu Linux 或 macOS 上没有。我想知道此警告是否特定于 Windows 用户。

kimbaudi 于 2019-12-05

@kimbaudi我在 windows 系统中也有这个错误，你知道在 linux 的生产环境中是否可以吗？？

ChanclaYCod 于 2019-12-22

我为 Gatsby 入门包尝试了此解决方案，但没有奏效。最近有什么变化吗？

MatthewJRoybal 于 2020-01-08

👍2

这突然开始出现在我正在从事的项目中，为什么会发生这种情况。我打破了什么可以忽略警告吗？

Thebohemiangeek 于 2020-01-11

也看到这个问题，在 Windows 10 机器上通过 Chrome（如果相关）

miller-productions 于 2020-02-01

+1 这里一样。并且@hot-loader/react-dom的解决方法不起作用（尝试了两个版本） - 开发失败Error: Cannot find module 'react-dom/server'

ovsw 于 2020-02-17

👍5

也在我的 WINdows 盒子上工作。稍后会在我的个人 Macbook 盒子上检查一下，看看我是否得到不同的结果。

MatthewCushing 于 2020-02-28

自从更新对最新版本做出反应后，我又开始看到这个了。

t2ca 于 2020-02-28

👍9

运行： yarn add react-dom@npm:@hot-loader/react-dom为我解决了这个问题。
来自： react-dom - 热加载版 Rewire - (Yarn) 任何其他系统

beelee 于 2020-03-07

👍7 🚀3 ❤2 🎉1

运行： yarn add react-dom@npm:@hot-loader/react-dom为我解决了这个问题。
来自： react-dom - 热加载版 Rewire - (Yarn) 任何其他系统

或npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
es.: npm add @hot-loader/[email protected]
并添加到 gatsby-node.js：
exports.onCreateWebpackConfig = ({ getConfig, stage }) => { const config = getConfig() if (stage.startsWith('develop') && config.resolve) { config.resolve.alias = { ...config.resolve.alias, 'react-dom': '@hot-loader/react-dom' } } }
运行gatsby develop
为我解决了这个问题。

zaktwist 于 2020-03-11

❤7

我仍然需要在所有 gatsby 站点上进行相关修复，以确保更顺畅的开发过程。否则，在本地主机开发环境中，热重载确实会间歇性地失败。

apolopena 于 2020-03-28

我正在使用yarn add react-dom@npm:@hot-loader/react-dom但在带有 lerna 的纱线工作区项目中，有一些我无法解决的令人讨厌的问题。尝试过 nohoist 但它没有像我最初想的那样工作。

好像有人解决了？我认为这种方法（别名包）可以解决这个问题，但我不是 100% 确定。

barthicus 于 2020-03-28

安装 `@hot-loader/react-dom" 并将 webpack 配置添加到 gatsby-node.js 是一种解决方法还是永久解决方案？如果它是永久性的，难道不应该将其内置到 Gatsby 中吗？如果是一种解决方法，那将是什么是我们删除它的触发器？

我还想补充一点，我遇到了某些页面在从 Ant Design 4.1.5 更新到 v4.2.0 后根本无法呈现。他们重构了List.Item组件以使用钩子，我收到了一个关于函数组件试图返回一个类组件的 React 错误。应用补丁完全解决了这个问题。故事寓意：“未检测到 react-🔥-dom 补丁”警告确实会导致问题！

devuxer 于 2020-05-11

👍1

@wardpeet我将react-dom替换@hot-loader/react-dom以删除此警告。

感谢它的工作

azware 于 2020-05-20

任何新闻？
我们是否应该像@wardpeet建议的那样继续并在我们的项目中手动修复它？

Cry0nicS 于 2020-05-26

👍1

我不得不说，这是当今如此多的 Web 开发的征兆。由随机更改引起的随机错误，没有明显的解决方案，不涉及启动一些打击，并希望您尝试修复，以防万一它们起作用并且不真正理解它们为什么会这样做或不这样做。是的，我应该更多地参与 repos 但嘿，我什至无法让 Gatsby 在没有一堆随机警告的情况下运行，所以我将毫无用处。我的 2 美分。

Tony221268 于 2020-05-28

👍5 👎1

每次我开始一个项目时我都会来这里：
https://github.com/gatsbyjs/gatsby-starter-default

所以我写这篇笔记是为了我自己，以及其他任何滚动到这里的人👋（嘿未来的我）

第1步

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

npm install -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",
        },
      },
    })
  }
}

使用上面的代码而不是这里提到的其他代码，因为：
https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment -538662592

“最好使用 actions.setWebpackConfig，因为它会自动与默认配置合并”

birksy89 于 2020-06-20

👍36 ❤4 👀3 🎉2

你也可以使用GATSBY_HOT_LOADER=fast-refresh 。我们很高兴接受 PR 使 @hot-loader 成为开发的默认值

wardpeet 于 2020-06-20

👀1 ❤1

您需要在包文件中添加 react-hot-dom 的匹配版本

"@hot-loader/react-dom": "^16.8.6",

在你的 webpack 配置中，你需要添加

别名：{'react-dom':'@hot-loader/react-dom'}

harshalimatte 于 2020-06-25

这是否有助于发现您需要做什么https://github.com/gatsbyjs/gatsby/pull/26927 ？

wardpeet 于 2020-09-17

@wardpeet - 我刚刚经历过这个，是的，非常清楚。谢谢你。

不确定其他人，但我通过控制台警告发现了它......而不是遇到任何功能故障。

通过指定需要安装的版本在控制台中添加解决问题的步骤是完美的🎉

birksy89 于 2020-09-18

我尝试了建议的解决方案：

安装了“@hot-loader/react-dom”：“^16.8.6”
在gatsby-config.js添加了此部分：

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

但这对我不起作用。

有什么建议吗？

λ盖茨比信息

系统：
操作系统：Windows 10 10.0.16299
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
二进制文件：
节点：14.6.0 - C:\Program Filesnodejsnode.EXE
纱线：1.22.4 - C:\Program Files (x86)\Yarn\binyarn.CMD
npm: 6.14.6 - C:\Program Filesnodejs\npm.CMD
语言：
Python：3.8.1 - /c/Users/ccordero/AppData/Local/Programs/Python/Python38/python
浏览器：
边缘：斯巴达 (41.16299.1004.0)
npm 软件包：
盖茨比：^2.18.18 => 2.24.33
盖茨比插件清单：^2.4.22 => 2.4.22
盖茨比插件离线：^3.2.22 => 3.2.22
gatsby-source-graphql: ^2.7.0 => 2.7.0
gatsby-theme-codebushi: 1.0.0 => 1.0.0

更新：
我回滚了前面的步骤，这个解决方案终于去掉了警告：

运行： yarn add react-dom@npm:@hot-loader/react-dom为我解决了这个问题。
来自： react-dom - 热加载版 Rewire - (Yarn) 任何其他系统

ccalvarez 于 2020-10-05

👍4 ❤1 🎉1

第1步
运行此命令 - 但单独运行此命令并不能解决问题：
npm install -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",
        },
      },
    })
  }
}
使用上面的代码而不是这里提到的其他代码，因为：
第11934章（评论）
“最好使用 actions.setWebpackConfig，因为它会自动与默认配置合并”

安装对我来说失败了，我必须添加我当前的 react 版本。

来自@zaktwist 的帖子有效（https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment-597560317）
npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
例如npm add @hot-loader/[email protected]

Xairoo 于 2020-11-27

此页面是否有帮助？

0 / 5 - 0 等级

Gatsby: React-Hot-Loader：未检测到 react-🔥-dom 补丁。 React 16.6+ 功能可能无法使用。

描述

重现步骤

预期结果

实际结果

环境

最有用的评论

所有52条评论

示例存储库

如何繁殖

第1步

第2步

第1步

第2步

相关问题