この警告も確認できました。 また、gatsby-starter-defaultを使用してこの警告を再現することもできました。

おそらくhttps://github.com/gaearon/react-hot-loader/tree/7089062eac273832102c074a368d5af27e23e0b0#webpack-pluginがありません

react fire：fire：はまだ公式ではないので、大したことではありません。

Webpack.configはここにあります：
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js

@wardpeet react-domを@ hot-loader / react-domに置き換えて、この警告を削除します。

それもうまくいきます！ 💪

@achmadk @wardpeetどこでreact-domを置き換えましたか
@ hot-loader / react-dom？
コードベースでは、gatsbyコード内のどこかにあるはずです。

たとえば、 @ JustFly1984では、 コードベースを使用しています。 package.jsonファイルでは、 react-dom内にdependenciesます。 次に、 react-domを@hot-loader/react-dom置き換えます。

この警告をgatsby-starter-defaultで再現します。

だから何をすべきか？

「reactfire」がリリースされるのを待ちますか？ または、 react-domを@hot-loader/react-dom置き換えますか？

それは「反応火」とはまったく関係がなく、絵文字は混乱を招きます。

ローカルで実行できる回避策は、 @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'
    }
  }
}

回避策は警告を削除しますが..
今のところホットリロードはありませんか？ （ファイルを保存すると、アプリのページが更新されます）

ひや！

この問題は静かになりました。 不気味な静か。 👻

多くの問題が発生しているため、現在、30日間使用されなかった後に問題をクローズしています。 ここでの最後の更新から少なくとも20日が経過しています。

この問題を見逃した場合、または開いたままにしておきたい場合は、ここに返信してください。 この問題を開いたままにするために、「古くない」というラベルを追加することもできます。

ギャツビーコミュニティに参加していただきありがとうございます。 💪💜

古くない！

ロードマップに追加したのは、新しい人々が何か間違ったことをしたという印象を与える可能性があるためです。

明確にするために、回避策を適用することから何を期待する必要がありますか？ @misterbridgeが気づいたように、

この修正をできるだけ早く取得させてください

新しいPRを作成しましたhttps://github.com/gatsbyjs/gatsby/pull/13713これがいくつかのリポジトリでテストできれば楽しいでしょう。

これは＃13713で修正されたようです

最後のgatsbyバージョンの警告を削除するには、そのexports.onCreateWebpackConfigパッチがまだ必要ですか？ それとも、警告を無視することはできますか？

React16.9.0の使用

再び戻ってきたようです

これは、新しいスタータープロジェクトでも見られます。

パッケージファイルにreact-hot-domに一致するバージョンを追加する必要があります

"@ hot-loader / react-dom"： "^ 16.8.6"、

そしてあなたのwebpack設定で、あなたは追加する必要があります

エイリアス：{'react-dom'： '@ hot-loader / react-dom'}

それは実際には何も壊さないので、私が答えたこのスタックオーバーフローの質問に記載されているように、通常は警告を非表示にするのが安全です：

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パッケージから移行する必要がないと思います。

@TheAadithyanによる修正は

Gatsby APIに続いて、 actions.setWebpackConfig使用することをお勧めします。

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

デフォルトの設定と自動的にマージされます。

@antoinerousseauと@ooloth：不幸な副作用として、パッチ、それは使用してパッケージたときにコンパイルに失敗プロジェクト原因としてreact-modalでローカルファイルシステムからインストールされていますfile:[path to project] 。 本当に奇妙なのは、Azure DevOpsアーティファクトからインストールするときに、まったく同じコードが正常に機能することです。

パッチを削除しても問題は発生しません。 react-modalを依存関係として持つ2つの異なるプロジェクトでこれをテストしましたが、どちらも同じエラーで失敗します。 react-modalはreact-dom依存していますが、上記のパッチを適用すると解決できません。

レポの例

リポジトリの例については、 https：//github.com/collector-bank/collector-portal-frameworkを参照して

再現する方法

1. file:..を使用して、 react-modal依存するローカルパッケージをインストールします。
2. npm run start実行します。
3. 以下に示すようなエラーでコンパイルが失敗するのを見てください。

» 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.

それは「反応火」とはまったく関係がなく、絵文字は混乱を招きます。

ローカルで実行できる回避策は、 @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このスレッドを読みましたか？...

Gatsby APIに続いて、 actions.setWebpackConfig使用することをお勧めします。

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

デフォルトの設定と自動的にマージされます。

Newbはこちら。 このコードはどこに置きますか？ gatsby-node.js？

@TriStarGodはい、それはapiフックが「住んでいる」場所です。 そのコードスニペットはgatsby-node.js挿入する必要があります

@TriStarGodリンクしたページに表示されます...

使用法：プロジェクトのルートにあるgatsby-node.jsという名前のファイルからAPIをエクスポートして、これらのAPIのいずれかを実装します。

この警告はWindows10でも発生していますが、UbuntuLinuxやmacOSでは発生していません。 この警告はWindowsユーザーに固有のものかどうか疑問に思います。

@kimbaudi Windowsシステムでもこのエラーが発生しますが、Linuxの本番環境で問題がないかどうかわかりますか？

Gatsbyスターターパッケージでこのソリューションを試しましたが、機能しませんでした。 最近何か変わったことはありますか？

これは私が取り組んでいたプロジェクトに突然現れ始めました、なぜこれが起こっているのですか？ 私は何かを壊しましたか？警告を無視できますか？

+1

この問題は、Chrome経由のWindows 10マシンでも発生します（該当する場合）

ここで同じ+1。 そして、 @hot-loader/react-domの回避策は機能しません（両方のバージョンを試しました）-devはError: Cannot find module 'react-dom/server'失敗します

また、これを職場のWindowsボックスで取得しています。 後で個人のMacbookボックスでチェックして、別の結果が得られるかどうかを確認します。

更新が最新バージョンに反応するので、私はこれを再び見始めています。

実行中： yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom問題が解決しました。
From： react-dom-hot-loader edition Rewire-（Yarn）その他のシステム

実行中： yarn add react-dom<strong i="6">@npm</strong>:@hot-loader/react-dom問題が解決しました。
From： react-dom-hot-loader edition 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実行します
私のために問題を解決しました。

それでも、よりスムーズな開発プロセスを確実にするために、すべてのgatsbyサイトで行う必要のある関連性のある修正を行います。 そうしないと、ローカルホスト開発環境でホットリロードが断続的に失敗します。

私はyarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-domいますが、lernaを使用したyarnワークスペースプロジェクトでは、修正できなかった厄介な問題があります。 nohoistを試しましたが、最初に思ったように機能していません。

誰かがそれを解決したように？ この方法（パッケージのエイリアシング）はこの問題を引き起こす可能性があると思いますが、100％確信はありません。

`@ hot-loader / react-dom"をインストールし、gatsby-node.jsにwebpack構成を追加することは、回避策または永続的な解決策ですか？永続的な場合、これをGatsbyに組み込むべきではありませんか？回避策の場合、どうなりますか？それを削除するきっかけになりますか？

また、Ant Design 4.1.5からv4.2.0に更新した後、特定のページが表示されないことも付け加えておきます。 彼らはフックを使用するためにList.Itemコンポーネントをリファクタリングしました、そして私はクラスコンポーネントを返そうとしている機能コンポーネントについてReactエラーを受け取りました。 パッチを適用すると、この問題は完全に解決されました。 話の教訓：「react-🔥-domパッチが検出されません」という警告は本当に問題を引き起こす可能性があります！

@wardpeet react-domを@ hot-loader / react-domに置き換えて、この警告を削除します。

その仕事に感謝します

連絡あった？
@wardpeetが提案したように、先に進んでプロジェクトで手動で修正する

私はこれが最近の多くのウェブ開発の兆候であると言わなければなりません。 いくつかのヒットを開始することを含まない明白な解決策のないランダムな変更によって引き起こされるランダムエラーと、それらが機能する場合に備えて試してみて、なぜ機能するのか機能しないのかを実際に理解していない修正を希望します。 はい、私はリポジトリにもっと関与する必要がありますが、ねえ、私はギャツビーをランダムな警告の束なしで実行させることさえできないので、私は役に立たないでしょう。 私の2セント。

私はプロジェクトを開始するたびにここに来ます：
https://github.com/gatsbyjs/gatsby-starter-default

だから私は自分自身のために、そしてここまでスクロールする他の人のためにこのメモを書いています👋（Hey future me）

ステップ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を使用することをお勧めします。」

GATSBY_HOT_LOADER=fast-refresh使用することもできます。 @ hot-loaderを開発のデフォルトにするPRを喜んで受け入れます

パッケージファイルにreact-hot-domに一致するバージョンを追加する必要があります

"@ hot-loader / react-dom"： "^ 16.8.6"、

そしてあなたのwebpack設定で、あなたは追加する必要があります

エイリアス：{'react-dom'： '@ hot-loader / react-dom'}

これは、 https：//github.com/gatsbyjs/gatsby/pull/26927で何をする必要があるかを発見するのに役立ち

@ wardpeet-私はこれを実行したばかりで、ええ、非常に明確です。 ありがとうございました。

他の人についてはわかりませんが、コンソールの警告で発見しました...機能の障害に遭遇するのではなく。

インストールに必要なバージョンを指定してコンソール内で問題を解決する手順を追加するのは完璧です🎉

私は提案された解決策を試しました：

• インストールされた "@ 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' } } }); } };

しかし、それは私にとってはうまくいきません。

なにか提案を？

λgatsby情報

システム：
OS：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）
npmPackages：
ギャツビー：^ 2.18.18 => 2.24.33
gatsby-plugin-manifest：^ 2.4.22 => 2.4.22
gatsby-plugin-offline：^ 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<strong i="37">@npm</strong>:@hot-loader/react-dom問題が解決しました。
From： react-dom-hot-loader edition Rewire-（Yarn）その他のシステム

ステップ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からの投稿が
npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
たとえばnpm add @hot-loader/[email protected]