Puedo confirmar que también he visto esta advertencia. También pude reproducir esta advertencia con gatsby-starter-default.

Probablemente nos falte https://github.com/gaearon/react-hot-loader/tree/7089062eac273832102c074a368d5af27e23e0b0#webpack -plugin

No es un gran problema en el cajero automático porque react fire: fire: aún no es oficial.

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

@wardpeet Reemplazo react-dom con @ hot-loader / react-dom para eliminar esta advertencia.

¡Eso también funciona! 💪

@achmadk @wardpeet ¿dónde reemplazaste react-dom con
@ hot-loader / react-dom?
No veo eso en mi código base, debería estar en algún lugar dentro del código gatsby

@ JustFly1984, por ejemplo, uso la base de @kripod . En el archivo package.json , tiene react-dom dentro de dependencies . Y luego reemplace react-dom con @hot-loader/react-dom .

Reproduzco esta advertencia con gatsby-starter-default.

¿Entonces, qué debemos hacer?

¿Esperar a que se libere "Reaccionar fuego"? ¿O reemplazar react-dom con @hot-loader/react-dom ?

Eso no tiene nada que ver con "reaccionar fuego" y el emoji es confuso.

Una solución alternativa que se puede hacer localmente es instalar @hot-loader/react-dom como devDependency y agregar este gancho a 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 solución temporal elimina la advertencia pero ...
¿No hay recarga en caliente por ahora? (Guardar un archivo actualizará la página en mi aplicación)

Hola!

Este tema se ha silenciado. Silencio espeluznante. 👻

Tenemos muchos problemas, por lo que actualmente cerramos los problemas después de 30 días de inactividad. Han pasado al menos 20 días desde la última actualización aquí.

Si pasamos por alto este problema o si desea mantenerlo abierto, responda aquí. ¡También puede agregar la etiqueta "no obsoleto" para mantener este problema abierto!

¡Gracias por ser parte de la comunidad de Gatsby! 💪💜

no rancio!

Lo agregué a nuestra hoja de ruta porque podría generar nuevas personas que podrían darles la impresión de que han hecho algo mal.

Para que quede claro, ¿qué debemos esperar de la aplicación de la solución alternativa? ¿Eliminará eso la recarga en caliente como lo notó

Déjame arreglar esto lo antes posible

Creé un nuevo PR https://github.com/gatsbyjs/gatsby/pull/13713 sería divertido si esto pudiera probarse en algunos repositorios.

Parece que esto se solucionó en # 13713

¿Todavía necesitamos ese parche exports.onCreateWebpackConfig para eliminar la advertencia en las últimas versiones de gatsby? ¿O podemos simplemente ignorar la advertencia?

Usando React 16.9.0

Parece que va a volver de nuevo

También veo esto en nuevos proyectos iniciales.

necesita agregar la versión coincidente para react-hot-dom en su archivo de paquete

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

y en la configuración de su paquete web, debe agregar

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

Como realmente no rompe nada, generalmente es seguro ocultar la advertencia como se indica en esta pregunta de desbordamiento de pila que respondí:

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

Estaría dispuesto a enviar un PR si alguien puede confirmar que las siguientes líneas son el lugar correcto para realizar el cambio:

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

Soy algo nuevo en Gatsby, pero creo que este sería un cambio bastante sencillo que no requiere que los usuarios migren del paquete principal react-dom .

La solución de @TheAadithyan funciona. Aunque es un poco molesto ...

Siguiendo la API de Gatsby , es mejor usar actions.setWebpackConfig , por ejemplo

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

Se fusiona automáticamente con la configuración predeterminada.

@antoinerousseau y @ooloth : Ese parche es un efecto secundario desafortunado, ya que provoca que los proyectos no se compilen cuando un paquete que usa react-modal se ha instalado desde el sistema de archivos local con file:[path to project] . Lo que es realmente extraño es que el mismo código funciona bien cuando se instala desde nuestro artefacto Azure DevOps.

El problema no ocurre al quitar el parche. He probado esto con dos proyectos diferentes que tienen react-modal como dependencia y ambos fallan con el mismo error. react-modal tiene una dependencia de react-dom pero no puede resolverlo cuando se aplica el parche anterior.

Repo de ejemplo

Para obtener un repositorio de ejemplo, consulte https://github.com/collector-bank/collector-portal-framework.

Como reproducir

1. Instale un paquete local con una dependencia de react-modal usando file:.. .
2. Ejecute npm run start .
3. Observe el error de compilación con un error similar al que se muestra a continuación:

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

Eso no tiene nada que ver con "reaccionar fuego" y el emoji es confuso.

Una solución alternativa que se puede hacer localmente es instalar @hot-loader/react-dom como devDependency y agregar este gancho a 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'
    }
  }
}

Tuve que volver a compilar después, ¡pero funcionó!

@prevolorio ¿leíste este hilo? ...

Siguiendo la API de Gatsby , es mejor usar actions.setWebpackConfig , por ejemplo

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

Se fusiona automáticamente con la configuración predeterminada.

Newb aquí. ¿Dónde pongo este código? gatsby-node.js?

@TriStarGod sí, ahí es donde el api hook "vive". Ese fragmento de código debe insertarse en gatsby-node.js

@TriStarGod Dice justo en la página que

Uso: implemente cualquiera de estas API exportándolas desde un archivo llamado gatsby-node.js en la raíz de su proyecto.

También recibí esta advertencia en Windows 10, pero no en Ubuntu Linux o macOS. Me pregunto si esta advertencia es específica para los usuarios de Windows.

@kimbaudi También tengo este error en un sistema Windows, ¿sabes si estará bien en un entorno de producción en Linux?

Probé esta solución para el paquete de inicio de Gatsby y no funcionó. ¿Ha cambiado algo recientemente?

Esto de repente comenzó a aparecer en un proyecto en el que estaba trabajando, ¿por qué sucede esto? ¿Rompí algo? ¿Puedo ignorar la advertencia?

+1

Al ver este problema también, en una máquina con Windows 10 a través de Chrome (si es relevante)

+1 igual aquí. Y la solución con @hot-loader/react-dom no funciona (probé ambas versiones) - dev falla con Error: Cannot find module 'react-dom/server'

También obteniendo esto en mi caja de Windows en el trabajo. Lo comprobaré en mi caja de Macbook personal más tarde para ver si obtengo resultados diferentes.

Estoy empezando a ver esto de nuevo desde que actualizo reaccionar a la última versión.

running: yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom resolvió el problema por mí.
De: react-dom - edición hot-loader Rewire - (Yarn) Cualquier otro sistema

running: yarn add react-dom<strong i="6">@npm</strong>:@hot-loader/react-dom resolvió el problema por mí.
De: react-dom - edición hot-loader Rewire - (Yarn) Cualquier otro sistema

o npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
es .: npm add @hot-loader/[email protected]
y agregar a 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' } } }
ejecutar gatsby develop
resolvió el problema para mí.

Sigue siendo una solución relevante que necesito hacer en todos mis sitios de gatsby para garantizar un proceso de desarrollo más fluido. De lo contrario, la recarga en caliente falla de forma intermitente en el entorno de desarrollo de localhost.

Estoy usando yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom pero en el proyecto de espacios de trabajo de hilo con lerna hay problemas desagradables que no pude solucionar. Probé nohoist pero no funciona como pensé inicialmente.

¿Alguien lo ha resuelto? Creo que este método (paquetes de alias) puede solucionar este problema, pero no estoy 100% seguro.

¿Instalar "@ hot-loader / react-dom" y agregar la configuración del paquete web a gatsby-node.js es una solución temporal o una solución permanente? Si es permanente, ¿no debería estar integrado en Gatsby? Si es una solución alternativa, ¿qué ¿Será el detonante para que lo eliminemos?

También me gustaría agregar que me encontré con ciertas páginas que simplemente no se representaban después de actualizar de Ant Design 4.1.5 a v4.2.0. Refactorizaron el componente List.Item para usar ganchos, y recibí un error de React sobre un componente funcional que intentaba devolver un componente de clase. La aplicación del parche resolvió totalmente este problema. Moraleja de la historia: ¡la advertencia "no se detecta el parche react-🔥-dom" realmente puede causar problemas!

@wardpeet Reemplazo react-dom con @ hot-loader / react-dom para eliminar esta advertencia.

gracias su trabajo

¿Hay noticias?
¿Deberíamos seguir adelante y solucionarlo manualmente en nuestros proyectos, como sugirió @wardpeet ?

Debo decir que esto es sintomático de tanto desarrollo web en estos días. Un error aleatorio causado por un cambio aleatorio sin una solución obvia que no implica iniciar algunas correcciones de éxito y esperanza que intente en caso de que funcionen y no entienda realmente por qué lo hacen o no. Sí, debería involucrarme más en los repositorios, pero oye, ni siquiera puedo hacer que Gatsby se ejecute sin un montón de advertencias aleatorias, por lo que sería inútil. Mis 2 centavos.

Vengo aquí cada vez que comienzo un proyecto con:
https://github.com/gatsbyjs/gatsby-starter-default

Así que estoy escribiendo esta nota para mí y para cualquier otra persona que se desplace hasta aquí 👋 (Hey, futuro yo)

Paso 1

Ejecute este comando, pero ejecutar esto solo no solucionará el problema:

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

Paso 2

Modifique gatsby.node.js para agregar lo siguiente:

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

Utilice el código anterior sobre otros mencionados aquí porque:
https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment -538662592

"Es mejor usar actions.setWebpackConfig porque se fusiona automáticamente con la configuración predeterminada"

también puede usar GATSBY_HOT_LOADER=fast-refresh . Nos complace aceptar un PR para que @ hot-loader sea el predeterminado para el desarrollo.

necesita agregar la versión coincidente para react-hot-dom en su archivo de paquete

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

y en la configuración de su paquete web, debe agregar

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

¿Esto ayudaría a descubrir lo que necesita hacer https://github.com/gatsbyjs/gatsby/pull/26927 ?

@wardpeet - Acabo de

No estoy seguro de otros, pero lo descubrí a través de la advertencia de la consola ... En lugar de encontrar alguna falla de funcionalidad.

Agregar los pasos para resolver el problema dentro de la consola especificando la versión requerida para instalar es perfecto 🎉

Probé la solución sugerida:

• instalado "@ hot-loader / react-dom": "^ 16.8.6"
• agregó esta sección en gatsby-config.js :

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

pero no me funciona.

¿Cualquier sugerencia?

λ gatsby información

Sistema:
SO: Windows 10 10.0.16299
CPU: (8) CPU x64 Intel (R) Core (TM) i7-6700HQ a 2,60 GHz
Binarios:
Nodo: 14.6.0 - C: \ Archivos de programanodejsnode.EXE
Yarn: 1.22.4 - C: \ Archivos de programa (x86) \ Yarn \ binyarn.CMD
npm: 6.14.6 - C: \ Archivos de programanodejs \ npm.CMD
Idiomas:
Python: 3.8.1 - / c / Users / ccordero / AppData / Local / Programs / Python / Python38 / python
Navegadores:
Borde: espartano (41.16299.1004.0)
npm Paquetes:
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

ACTUALIZAR:
Retrocedí los pasos anteriores y esta solución finalmente eliminó la advertencia:

running: yarn add react-dom<strong i="37">@npm</strong>:@hot-loader/react-dom resolvió el problema por mí.
De: react-dom - edición hot-loader Rewire - (Yarn) Cualquier otro sistema

Paso 1

Ejecute este comando, pero ejecutar esto solo no solucionará el problema:

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

Paso 2

Modifique gatsby.node.js para agregar lo siguiente:

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

Utilice el código anterior sobre otros mencionados aquí porque:
# 11934 (comentario)

"Es mejor usar actions.setWebpackConfig porque se fusiona automáticamente con la configuración predeterminada"

La instalación me falló, tengo que agregar mi versión actual de reacción.

La publicación de @zaktwist funcionó (https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment-597560317)
npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
Por ejemplo npm add @hot-loader/[email protected]