Ich kann bestätigen, dass ich diese Warnung auch gesehen habe. Diese Warnung konnte ich auch mit gatsby-starter-default reproduzieren.

Wir vermissen wahrscheinlich https://github.com/gaearon/react-hot-loader/tree/7089062eac273832102c074a368d5af27e23e0b0#webpack -plugin

Es ist keine große Sache, weil das Feuer reagieren :fire: noch nicht offiziell ist.

Webpack.config ist hier:
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js

@wardpeet Ich ersetze react-dom durch @hot-loader/react-dom , um diese Warnung zu entfernen.

das geht auch! 💪

@achmadk @wardpeet wo hast du react-dom durch ersetzt
@hot-loader/react-dom ?
Ich sehe das in meiner Codebasis nicht, es sollte irgendwo im Gatsby-Code sein

@JustFly1984 zum Beispiel verwende ich die Codebasis von @kripod . In der Datei package.json befindet sich react-dom in dependencies . Und dann ersetzen Sie react-dom durch @hot-loader/react-dom .

Ich reproduziere diese Warnung mit gatsby-starter-default.

Also, was sollten wir tun?

Auf die Freigabe von "Reagieren Feuer" warten? Oder react-dom durch @hot-loader/react-dom ersetzen?

Das hat nichts mit "Feuer reagieren" zu tun und das Emoji ist verwirrend.

Ein Workaround, der lokal durchgeführt werden kann, besteht darin, @hot-loader/react-dom als devDependency zu installieren und diesen Hook zu gatsby-node.js hinzuzufügen:

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'
    }
  }
}

Die Problemumgehung entfernt die Warnung, aber ..
Es gibt vorerst kein heißes Nachladen? (Das Speichern einer Datei aktualisiert die Seite in meiner App)

Hallo!

Dieses Thema ist ruhig geworden. Gruselige Stille. 👻

Wir bekommen viele Probleme, daher schließen wir Probleme derzeit nach 30 Tagen Inaktivität. Seit dem letzten Update hier sind mindestens 20 Tage vergangen.

Wenn wir dieses Problem verpasst haben oder Sie es offen halten möchten, antworten Sie bitte hier. Sie können auch das Etikett "nicht veraltet" hinzufügen, um dieses Problem offen zu halten!

Danke, dass du ein Teil der Gatsby-Community bist! 💪💜

nicht altbacken!

Ich habe es in unsere Roadmap aufgenommen, weil es neue Leute anlocken könnte, die ihnen den Eindruck erwecken könnten, sie hätten etwas falsch gemacht.

Nur um es klarzustellen, was können wir von der Anwendung des Workarounds erwarten? Wird dadurch das heiße Nachladen entfernt, wie es @misterbridge bemerkt hat? Hat jemand eine Problemumgehung gefunden, die das heiße Neuladen funktioniert?

Lass mich das so schnell wie möglich reparieren

Ich habe eine neue PR https://github.com/gatsbyjs/gatsby/pull/13713 erstellt, es würde Spaß machen, wenn dies an einigen Repos getestet werden könnte.

Sieht so aus, als ob dies in #13713 behoben wurde

Brauchen wir noch den exports.onCreateWebpackConfig Patch, um die Warnung in den letzten Gatsby-Versionen zu entfernen? Oder können wir die Warnung einfach ignorieren?

Verwenden von React 16.9.0

Scheint wieder zu kommen

Ich sehe das auch bei neuen Starterprojekten.

Sie müssen die passende Version für React-Hot-Dom in Ihrer Paketdatei hinzufügen

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

und in Ihrer Webpack-Konfiguration müssen Sie hinzufügen

Alias: { 'react-dom': '@hot-loader/react-dom' }

Da es nicht wirklich etwas kaputt macht, ist es normalerweise sicher, die Warnung auszublenden, wie in dieser Stapelüberlauffrage angegeben, die ich beantwortet habe:

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

Ich wäre bereit, eine PR einzureichen, wenn jemand bestätigen kann, dass die folgenden Zeilen der richtige Ort sind, um die Änderung vorzunehmen:

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

Ich bin etwas neu bei Gatsby, aber ich denke, dies wäre eine ziemlich einfache Änderung, bei der Benutzer nicht vom Kernpaket react-dom migrieren müssen.

Der Fix von @TheAadithyan funktioniert. Aber irgendwie nervig...

Folgen Sie der Gatsby API , verwenden Sie besser actions.setWebpackConfig , zB

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

Es wird automatisch mit der Standardkonfiguration zusammengeführt.

@antoinerousseau und @ooloth : Dieser Patch ist ein unglücklicher Nebeneffekt, da er dazu führt, dass Projekte nicht kompiliert werden können, wenn ein Paket, das react-modal , vom lokalen Dateisystem mit file:[path to project] installiert wurde. Was wirklich seltsam ist, ist, dass derselbe Code bei der Installation von unserem Azure DevOps-Artefakt gut funktioniert.

Beim Entfernen des Patches tritt das Problem nicht auf. Ich habe dies mit zwei verschiedenen Projekten mit react-modal als Abhängigkeit getestet und beide schlagen mit dem gleichen Fehler fehl. react-modal hat eine Abhängigkeit von react-dom , kann diese aber nicht beheben, wenn der obige Patch angewendet wird.

Beispiel-Repository

Ein Beispiel-Repository finden Sie unter https://github.com/collector-bank/collector-portal-framework.

So reproduzieren Sie

1. Installieren Sie ein lokales Paket mit einer Abhängigkeit von react-modal mit file:.. .
2. Führen Sie npm run start .
3. Beobachten Sie, wie die Kompilierung mit einem ähnlichen Fehler wie unten gezeigt fehlschlägt:

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

Das hat nichts mit "Feuer reagieren" zu tun und das Emoji ist verwirrend.

Ein Workaround, der lokal durchgeführt werden kann, besteht darin, @hot-loader/react-dom als devDependency zu installieren und diesen Hook zu gatsby-node.js hinzuzufügen:

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'
    }
  }
}

Ich musste danach neu kompilieren, aber es hat funktioniert!

@prevolorio hast du diesen Thread gelesen?...

Folgen Sie der Gatsby API , verwenden Sie besser actions.setWebpackConfig , zB

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

Es wird automatisch mit der Standardkonfiguration zusammengeführt.

Neu hier. Wo füge ich diesen Code ein? gatsby-node.js?

@TriStarGod ja, dort "lebt" der API-Hook. Dieses Code-Snippet sollte in gatsby-node.js eingefügt werden

@TriStarGod Es steht direkt auf der Seite, die ich verlinkt habe ...

Verwendung: Implementieren Sie eine dieser APIs, indem Sie sie aus einer Datei namens gatsby-node.js im Stammverzeichnis Ihres Projekts exportieren.

Ich habe diese Warnung auch unter Windows 10 erhalten, aber nicht unter Ubuntu Linux oder macOS. Ich frage mich, ob diese Warnung spezifisch für Windows-Benutzer ist.

@kimbaudi Ich habe diesen Fehler auch in einem Windows-System, wissen Sie, ob er in einer Produktionsumgebung unter Linux in Ordnung ist?

Ich habe diese Lösung für das Gatsby-Starterpaket ausprobiert und es hat nicht funktioniert. Hat sich in letzter Zeit etwas geändert?

Dies tauchte plötzlich in einem Projekt auf, an dem ich arbeitete, warum passiert das? Habe ich etwas kaputt gemacht kann ich die Warnung einfach ignorieren?

+1

Dieses Problem wird auch auf einem Windows 10-Computer über Chrome angezeigt (falls dies relevant ist)

+1 gleich hier. Und der Workaround mit @hot-loader/react-dom funktioniert nicht (beide Versionen ausprobiert) - dev schlägt mit Error: Cannot find module 'react-dom/server' fehl

Bekomme dies auch auf meiner Windows-Box bei der Arbeit. Werde es später auf meiner persönlichen Macbook-Box überprüfen, um zu sehen, ob ich andere Ergebnisse erhalte.

Ich fange an, dies wieder zu sehen, seit das Update auf die neueste Version reagiert.

läuft: yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom das Problem für mich gelöst.
Von: react-dom - Hot-Loader-Edition Rewire - (Yarn) Jedes andere System

läuft: yarn add react-dom<strong i="6">@npm</strong>:@hot-loader/react-dom das Problem für mich gelöst.
Von: react-dom - Hot-Loader-Edition Rewire - (Yarn) Jedes andere System

oder npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
es.: npm add @hot-loader/[email protected]
und zu gatsby-node.js hinzufügen:
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 ausführen
hat das Problem für mich gelöst.

Immer noch eine relevante Korrektur, die ich auf allen meinen Gatsby-Sites vornehmen muss, um einen reibungsloseren Entwicklungsprozess zu gewährleisten. Andernfalls schlägt das Hot-Neuladen in der localhost-Entwicklungsumgebung tatsächlich zeitweise fehl.

Ich verwende yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom aber im Garn-Workspaces-Projekt mit lerna gibt es unangenehme Probleme, die ich nicht beheben konnte. Nohoist ausprobiert, aber es funktioniert nicht, wie ich anfangs dachte.

Wie hat es jemand gelöst? Ich denke, diese Methode (Aliasing-Pakete) kann dieses Problem verursachen, aber ich bin mir nicht 100% sicher.

Ist die Installation von `@hot-loader/react-dom" und das Hinzufügen der Webpack-Konfiguration zu gatsby-node.js eine Problemumgehung oder eine dauerhafte Lösung? Wenn es dauerhaft ist, sollte dies nicht in Gatsby integriert werden? Wenn es ein Workaround ist, was wird? der Auslöser für uns sein, es zu entfernen?

Ich möchte auch hinzufügen, dass ich auf bestimmte Seiten gestoßen bin, die nach dem Update von Ant Design 4.1.5 auf v4.2.0 einfach nicht gerendert wurden. Sie haben die List.Item Komponente umgestaltet, um Hooks zu verwenden, und ich erhielt einen React-Fehler über eine funktionale Komponente, die versuchte, eine Klassenkomponente zurückzugeben. Das Anwenden des Patches hat dieses Problem vollständig gelöst. Moral der Geschichte: Die Warnung "react-🔥-dom patch wird nicht erkannt" kann wirklich Probleme verursachen!

@wardpeet Ich ersetze react-dom durch @hot-loader/react-dom , um diese Warnung zu entfernen.

danke für seine arbeit

Irgendwelche Neuigkeiten?
Sollten wir es in unseren Projekten manuell beheben, wie @wardpeet vorgeschlagen hat?

Ich muss sagen, dass dies symptomatisch für so viel Webentwicklung heutzutage ist. Ein zufälliger Fehler, der durch eine zufällige Änderung ohne offensichtliche Lösung verursacht wird, die nicht das Auslösen einiger Hit-and-Hope-Fixes beinhaltet, die Sie versuchen, nur für den Fall, dass sie funktionieren und nicht wirklich verstehen, warum sie es tun oder nicht. Ja, ich sollte mich mehr an den Repos beteiligen, aber hey, ich kann Gatsby nicht einmal ohne ein paar zufällige Warnungen zum Laufen bringen, also wäre ich nutzlos. Meine 2 Cent.

Ich komme jedes Mal hierher, wenn ich ein Projekt starte mit:
https://github.com/gatsbyjs/gatsby-starter-default

Also schreibe ich diese Notiz für mich und alle anderen, die so weit scrollen 👋 (Hey Future Me)

Schritt 1

Führen Sie diesen Befehl aus - Aber wenn Sie ihn alleine ausführen, wird das Problem nicht behoben:

npm install -D @hot-loader/react-dom

Schritt 2

Ändern Sie gatsby.node.js , um Folgendes hinzuzufügen:

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

Verwenden Sie den obigen Code gegenüber anderen hier genannten, weil:
https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment -538662592

"Es ist besser,actions.setWebpackConfig zu verwenden, da es automatisch mit der Standardkonfiguration zusammengeführt wird"

Sie können auch GATSBY_HOT_LOADER=fast-refresh . Wir nehmen gerne eine PR an, um @hot-loader zum Standard für die Entwicklung zu machen

Sie müssen die passende Version für React-Hot-Dom in Ihrer Paketdatei hinzufügen

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

und in Ihrer Webpack-Konfiguration müssen Sie hinzufügen

Alias: { 'react-dom': '@hot-loader/react-dom' }

Würde dies helfen, herauszufinden, was Sie tun müssen https://github.com/gatsbyjs/gatsby/pull/26927 ?

@wardpeet - Ich habe das gerade durchgemacht, und ja, sehr klar. Dankeschön.

Bei anderen bin ich mir nicht sicher, aber ich habe es über die Konsolenwarnung entdeckt ... Anstatt auf einen Funktionsausfall zu stoßen.

Das Hinzufügen der Schritte zur Behebung des Problems in der Konsole durch Angabe der erforderlichen Version für die Installation ist perfekt 🎉

Ich habe den Lösungsvorschlag probiert:

• installiert "@hot-loader/react-dom": "^16.8.6"
• diesen Abschnitt in gatsby-config.js hinzugefügt:

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

aber bei mir funktioniert es nicht.

Irgendein Vorschlag?

Gatsby-Info

System:
Betriebssystem: Windows 10 10.0.16299
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2,60GHz
Binärdateien:
Knoten: 14.6.0 - C:\Programmenodejsnode.EXE
Garn: 1.22.4 - C:\Programme (x86)\Yarn\binyarn.CMD
npm: 6.14.6 - C:\Program Filesnodejs\npm.CMD
Sprachen:
Python: 3.8.1 - /c/Users/ccordero/AppData/Local/Programs/Python/Python38/python
Browser:
Kante: Spartan (41.16299.1004.0)
npmPakete:
gatsby: ^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

AKTUALISIEREN:
Ich habe die vorherigen Schritte zurückgesetzt und diese Lösung hat schließlich die Warnung entfernt:

läuft: yarn add react-dom<strong i="37">@npm</strong>:@hot-loader/react-dom das Problem für mich gelöst.
Von: react-dom - Hot-Loader-Edition Rewire - (Yarn) Jedes andere System

Schritt 1

Führen Sie diesen Befehl aus - Aber wenn Sie ihn alleine ausführen, wird das Problem nicht behoben:

npm install -D @hot-loader/react-dom

Schritt 2

Ändern Sie gatsby.node.js , um Folgendes hinzuzufügen:

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

Verwenden Sie den obigen Code gegenüber anderen hier genannten, weil:
#11934 (Kommentar)

"Es ist besser,actions.setWebpackConfig zu verwenden, da es automatisch mit der Standardkonfiguration zusammengeführt wird"

Die Installation ist bei mir fehlgeschlagen, ich muss meine aktuelle React-Version hinzufügen.

Post von @zaktwist hat funktioniert (https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment-597560317)
npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
Zum Beispiel npm add @hot-loader/[email protected]