Je peux confirmer que j'ai également vu cet avertissement. J'ai également pu reproduire cet avertissement avec gatsby-starter-default.

Il nous manque probablement https://github.com/gaearon/react-hot-loader/tree/7089062eac273832102c074a368d5af27e23e0b0#webpack -plugin

Ce n'est pas un gros problème car React Fire :fire: n'est pas encore officiel.

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

@wardpeet Je remplace react-dom par @hot-loader/react-dom pour supprimer cet avertissement.

ça marche aussi ! ??

@achmadk @wardpeet où avez-vous remplacé
@hot-loader/react-dom ?
Je ne vois pas cela dans ma base de code, cela devrait être quelque part dans le code de gatsby

@JustFly1984 par exemple, j'utilise la base de @kripod . Dans le fichier package.json , il contient react-dom intérieur de dependencies . Et puis remplacez react-dom par @hot-loader/react-dom .

Je reproduis cet avertissement avec gatsby-starter-default.

Alors, que devrions-nous faire?

Attendre le déclenchement du "react fire" ? Ou remplacez react-dom par @hot-loader/react-dom ?

Cela n'a aucun rapport avec "react fire" et l'emoji est déroutant.

Une solution de contournement qui peut être effectuée localement consiste à installer @hot-loader/react-dom tant que devDependency et à ajouter ce hook à 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'
    }
  }
}

La solution de contournement supprime l'avertissement mais ..
Il n'y a pas de rechargement à chaud pour l'instant ? (Enregistrer un fichier actualisera la page sur mon application)

Salut !

Ce problème est devenu silencieux. Effrayant calme. ??

Nous obtenons beaucoup de problèmes, nous fermons donc actuellement les problèmes après 30 jours d'inactivité. Cela fait au moins 20 jours depuis la dernière mise à jour ici.

Si nous avons raté ce problème ou si vous souhaitez le garder ouvert, veuillez répondre ici. Vous pouvez également ajouter l'étiquette « not stale » pour garder ce problème ouvert !

Merci de faire partie de la communauté Gatsby ! ??

pas rassis !

Je l'ai ajouté à notre feuille de route car cela pourrait attirer de nouvelles personnes, ce qui pourrait leur donner l'impression d'avoir fait quelque chose de mal.

Pour être clair, à quoi devons-nous nous attendre en appliquant la solution de contournement ? Cela supprimera-t-il le rechargement à chaud comme @misterbridge l'a remarqué ? Quelqu'un a-t-il trouvé une solution de contournement qui permet au rechargement à chaud de fonctionner ?

Laisse moi régler ça au plus vite

J'ai créé un nouveau PR https://github.com/gatsbyjs/gatsby/pull/13713 serait amusant si cela pouvait être testé sur quelques repos.

On dirait que cela a été corrigé dans #13713

Avons-nous toujours besoin de ce correctif exports.onCreateWebpackConfig pour supprimer l'avertissement dans les dernières versions de gatsby ? Ou pouvons-nous simplement ignorer l'avertissement ?

Utiliser React 16.9.0

On dirait que ça revient

Je vois aussi cela sur les nouveaux projets de démarrage.

vous devez ajouter la version correspondante pour react-hot-dom dans votre fichier de package

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

et dans votre configuration webpack, vous devez ajouter

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

Comme cela ne casse vraiment rien, il est généralement prudent de masquer l'avertissement, comme indiqué dans cette question de débordement de pile à laquelle j'ai répondu :

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

Je serais prêt à soumettre un PR si quelqu'un peut confirmer que les lignes suivantes sont au bon endroit pour effectuer le changement :

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

Je suis un peu nouveau sur Gatsby, mais je pense que ce serait un changement assez simple qui n'obligerait pas les utilisateurs à migrer hors du package de base react-dom .

Le correctif de @TheAadithyan fonctionne. Un peu ennuyeux quand même...

En suivant l' API Gatsby , mieux vaut utiliser actions.setWebpackConfig , par exemple

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

Il fusionne automatiquement avec la configuration par défaut.

@antoinerousseau et @ooloth : Ce correctif est un effet secondaire malheureux car il empêche les projets de se compiler lorsqu'un package utilisant react-modal a été installé à partir du système de fichiers local avec file:[path to project] . Ce qui est vraiment étrange, c'est que le même code fonctionne correctement lors de son installation à partir de notre artefact Azure DevOps.

Le problème ne se produit pas lors de la suppression du correctif. J'ai testé cela avec deux projets différents ayant react-modal comme dépendance et les deux échouent avec la même erreur. react-modal a une dépendance à react-dom mais il est incapable de le résoudre lorsque le correctif ci-dessus est appliqué.

Exemple de dépôt

Pour un exemple de dépôt, voir https://github.com/collector-bank/collector-portal-framework.

Comment reproduire

1. Installez un package local avec une dépendance à react-modal utilisant file:.. .
2. Exécutez npm run start .
3. Regardez la compilation échouer avec une erreur similaire à celle illustrée ci-dessous :

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

Cela n'a aucun rapport avec "react fire" et l'emoji est déroutant.

Une solution de contournement qui peut être effectuée localement consiste à installer @hot-loader/react-dom tant que devDependency et à ajouter ce hook à 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'
    }
  }
}

J'ai dû recompiler après mais ça a marché !

@prevolorio avez-vous lu ce fil?...

En suivant l' API Gatsby , mieux vaut utiliser actions.setWebpackConfig , par exemple

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

Il fusionne automatiquement avec la configuration par défaut.

Newb ici. Où mettre ce code ? gatsby-node.js ?

@TriStarGod oui, c'est là que le crochet api "habite". Cet extrait de code doit être inséré dans gatsby-node.js

@TriStarGod C'est dit directement sur la page que j'ai liée...

Utilisation : implémentez l'une de ces API en l'exportant à partir d'un fichier nommé gatsby-node.js à la racine de votre projet.

J'ai également reçu cet avertissement sur Windows 10, mais pas sur Ubuntu Linux ou macOS. Je me demande si cet avertissement est spécifique aux utilisateurs de Windows.

@kimbaudi J'ai aussi cette erreur dans un système Windows, savez-vous si cela ira dans un environnement de production sous Linux ??

J'ai essayé cette solution pour le package de démarrage Gatsby et cela n'a pas fonctionné. Est-ce que quelque chose a changé récemment ?

Cela a soudainement commencé à apparaître sur un projet sur lequel je travaillais, pourquoi cela se produit-il. ai-je cassé quelque chose, puis-je simplement ignorer l'avertissement ?

+1

Voir ce problème également, sur une machine Windows 10 via Chrome (si cela est pertinent)

+1 pareil ici. Et la solution de contournement avec @hot-loader/react-dom ne fonctionne pas (essayé les deux versions) - le dev échoue avec Error: Cannot find module 'react-dom/server'

Obtenir également ceci sur ma boîte Windows au travail. Je le vérifierai plus tard sur ma boîte Macbook personnelle pour voir si j'obtiens des résultats différents.

Je recommence à voir cela depuis que la mise à jour réagit à la dernière version.

en cours d'exécution : yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom résolu le problème pour moi.
De : react-dom - hot-loader edition Rewire - (Fil) Tout autre système

en cours d'exécution : yarn add react-dom<strong i="6">@npm</strong>:@hot-loader/react-dom résolu le problème pour moi.
De : react-dom - hot-loader edition Rewire - (Fil) Tout autre système

ou npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
ex. : npm add @hot-loader/[email protected]
et ajoutez à 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' } } }
courir gatsby develop
a résolu le problème pour moi.

Encore un correctif pertinent que je dois faire sur tous mes sites gatsby pour assurer un processus de développement plus fluide. Sinon, le rechargement à chaud échoue par intermittence sur l'environnement de développement localhost.

J'utilise yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom mais dans le projet d'espaces de travail de fil avec lerna, il y a des problèmes désagréables que je n'ai pas pu résoudre. J'ai essayé nohoist mais cela ne fonctionne pas comme je le pensais au départ.

Comme quelqu'un l'a-t-il résolu? Je pense que cette méthode (aliasing packages) peut causer ce problème mais je ne suis pas sûr à 100%.

Est-ce que l'installation de "@hot-loader/react-dom" et l'ajout de la configuration webpack à gatsby-node.js sont une solution de contournement ou une solution permanente ? Si c'est permanent, cela ne devrait-il pas être intégré à Gatsby ? Si c'est une solution de contournement, qu'est-ce qui être le déclencheur pour que nous le supprimions ?

J'aimerais également ajouter que je suis tombé sur certaines pages qui ne s'afficheraient tout simplement pas après la mise à jour d'Ant Design 4.1.5 vers v4.2.0. Ils ont remanié le composant List.Item pour utiliser des crochets, et j'obtenais une erreur React à propos d'un composant fonctionnel essayant de renvoyer un composant de classe. L'application du patch a totalement résolu ce problème. Morale de l'histoire : l'avertissement « react-🔥-dom patch n'est pas détecté » peut vraiment causer des problèmes !

@wardpeet Je remplace react-dom par @hot-loader/react-dom pour supprimer cet avertissement.

merci son travail

Des nouvelles?
Devrions-nous aller de l'avant et le corriger manuellement dans nos projets, comme @wardpeet l'a suggéré ?

Je dois dire que cela est symptomatique de tant de développement Web ces jours-ci. Une erreur aléatoire causée par un changement aléatoire sans solution évidente qui n'implique pas le lancement de certains correctifs et espère que vous essayez juste au cas où ils fonctionneraient et ne comprenaient pas vraiment pourquoi ils le font ou non. Oui, je devrais m'impliquer davantage dans les dépôts, mais bon, je ne peux même pas faire fonctionner Gatsby sans un tas d'avertissements aléatoires, donc je serais inutile. Mes 2 cents.

Je viens ici chaque fois que je démarre un projet avec :
https://github.com/gatsbyjs/gatsby-starter-default

Alors j'écris cette note pour moi-même, et pour toute autre personne qui fait défiler jusqu'ici (Hé futur moi)

Étape 1

Exécutez cette commande - Mais l'exécution seule ne résoudra pas le problème :

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

Étape 2

Modifiez gatsby.node.js pour ajouter les éléments suivants :

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

Utilisez le code ci-dessus par rapport aux autres mentionnés ici car :
https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment -538662592

"Il est préférable d'utiliser actions.setWebpackConfig car il fusionne automatiquement avec la configuration par défaut"

vous pouvez également utiliser GATSBY_HOT_LOADER=fast-refresh . Nous sommes heureux d'accepter un PR pour faire de @hot-loader la valeur par défaut pour le développement

vous devez ajouter la version correspondante pour react-hot-dom dans votre fichier de package

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

et dans votre configuration webpack, vous devez ajouter

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

Cela aiderait-il à découvrir ce que vous devez faire https://github.com/gatsbyjs/gatsby/pull/26927 ?

@wardpeet - Je viens de parcourir cela, et oui, très clair. Merci.

Pas sûr pour les autres, mais je l'ai découvert via l'avertissement de la console... Plutôt que de rencontrer une panne de fonctionnalité.

Ajouter les étapes pour résoudre le problème dans la console en spécifiant la version requise à installer est la perfection 🎉

J'ai essayé la solution suggérée :

• installé "@hot-loader/react-dom": "^16.8.6"
• ajouté cette section dans gatsby-config.js :

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

mais ça ne marche pas pour moi.

Toute suggestion?

info gatsby

Système:
Système d'exploitation : Windows 10 10.0.16299
Processeur : (8) processeur Intel(R) Core(TM) i7-6700HQ x64 à 2,60 GHz
Binaires :
Nœud : 14.6.0 - C:\Program Filesnodejsnode.EXE
Fil : 1.22.4 - C:\Program Files (x86)\Yarn\binyarn.CMD
npm : 6.14.6 - C:\Program Filesnodejs\npm.CMD
Langues :
Python : 3.8.1 - /c/Users/ccordero/AppData/Local/Programs/Python/Python38/python
Navigateurs :
Bord : Spartiate (41.16299.1004.0)
npmPaquets :
gatsby : ^2.18.18 => 2.24.33
gatsby-plugin-manifest: ^2.4.22 => 2.4.22
gatsby-plugin-hors ligne : ^ 3.2.22 => 3.2.22
gatsby-source-graphql : ^2.7.0 => 2.7.0
gatsby-thème-codebushi : 1.0.0 => 1.0.0

METTRE À JOUR:
J'ai annulé les étapes précédentes et cette solution a finalement supprimé l'avertissement :

en cours d'exécution : yarn add react-dom<strong i="37">@npm</strong>:@hot-loader/react-dom résolu le problème pour moi.
De : react-dom - hot-loader edition Rewire - (Fil) Tout autre système

Étape 1

Exécutez cette commande - Mais l'exécution seule ne résoudra pas le problème :

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

Étape 2

Modifiez gatsby.node.js pour ajouter les éléments suivants :

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

Utilisez le code ci-dessus par rapport aux autres mentionnés ici car :
#11934 (commentaire)

"Il est préférable d'utiliser actions.setWebpackConfig car il fusionne automatiquement avec la configuration par défaut"

L'installation a échoué pour moi, je dois ajouter ma version de réaction actuelle.

Le message de @zaktwist a fonctionné (https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment-597560317)
npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
Par exemple npm add @hot-loader/[email protected]