Posso confirmar que também vi este aviso. Também consegui reproduzir esse aviso com gatsby-starter-default.

Provavelmente estamos perdendo https://github.com/gaearon/react-hot-loader/tree/7089062eac273832102c074a368d5af27e23e0b0#webpack -plugin

Não é um grande problema atm porque reagir fogo: fogo: ainda não é oficial.

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

@wardpeet Eu substituo react-dom por @ hot-loader / react-dom para remover este aviso.

isso funciona bem! 💪

@achmadk @wardpeet onde você substituiu o
@ hot-loader / react-dom?
Não vejo isso em minha base de código, deveria estar em algum lugar dentro do código gatsby

@ JustFly1984 por exemplo, eu uso a base de @kripod . No arquivo package.json , tem react-dom dentro de dependencies . Em seguida, substitua react-dom por @hot-loader/react-dom .

Eu reproduzo este aviso com gatsby-starter-default.

Então o que deveríamos fazer?

Esperar que "reagir fogo" seja lançado? Ou substitua react-dom por @hot-loader/react-dom ?

Isso não tem nenhuma relação com "reagir ao fogo" e o emoji é confuso.

Uma solução alternativa que pode ser feita localmente é instalar @hot-loader/react-dom como devDependency e adicionar 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'
    }
  }
}

A solução alternativa remove o aviso, mas ..
Não há recarregamento quente por enquanto? (Salvar um arquivo atualizará a página em meu aplicativo)

Hiya!

Este problema ficou quieto. Silêncio assustador. 👻

Temos muitos problemas, então atualmente fechamos os problemas após 30 dias de inatividade. Já se passaram pelo menos 20 dias desde a última atualização aqui.

Se perdemos esse problema ou se você deseja mantê-lo em aberto, responda aqui. Você também pode adicionar o rótulo "não obsoleto" para manter este problema aberto!

Obrigado por fazer parte da comunidade Gatsby! 💪💜

não velho!

Eu o adicionei ao nosso roteiro porque pode lançar novas pessoas que podem dar a impressão de que fizeram algo errado.

Apenas para ficar claro, o que devemos esperar da aplicação da solução alternativa? Isso removerá o recarregamento a quente como @misterbridge notou? Alguém encontrou uma solução alternativa que mantém o recarregamento ativo funcionando?

Deixe-me consertar isso o mais rápido possível

Eu criei um novo PR https://github.com/gatsbyjs/gatsby/pull/13713 seria divertido se pudesse ser testado em alguns repositórios.

Parece que isso foi corrigido no # 13713

Ainda precisamos daquele patch exports.onCreateWebpackConfig para remover o aviso nas últimas versões do gatsby? Ou podemos simplesmente ignorar o aviso?

Usando React 16.9.0

Parece que está voltando de novo

Também estou vendo isso em novos projetos iniciais.

você precisa adicionar a versão correspondente para react-hot-dom em seu arquivo de pacote

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

e na configuração do seu webpack, você precisa adicionar

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

Como isso realmente não quebra nada, normalmente é seguro ocultar o aviso, conforme observado nesta pergunta de estouro de pilha que respondi:

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

Eu estaria pronto para enviar um PR se alguém pudesse confirmar que as seguintes linhas são o lugar certo para fazer a mudança:

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

Eu sou um pouco novo no Gatsby, mas acho que esta seria uma mudança bastante direta que não requer que os usuários migrem para fora do pacote react-dom .

A correção de @TheAadithyan funciona. Um pouco chato ...

Seguindo a API de Gatsby , é melhor usar actions.setWebpackConfig , por exemplo

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

Ele se funde automaticamente com a configuração padrão.

@antoinerousseau e @ooloth : Esse patch é um efeito colateral infeliz, pois faz com que os projetos falhem na compilação quando um pacote usando react-modal foi instalado a partir do sistema de arquivos local com file:[path to project] . O que é realmente estranho é que exatamente o mesmo código funciona bem ao ser instalado a partir de nosso artefato DevOps do Azure.

O problema não ocorre ao remover o patch. Eu testei isso com dois projetos diferentes tendo react-modal como dependência e ambos falham com o mesmo erro. react-modal tem uma dependência de react-dom mas não pode resolvê-la quando o patch acima é aplicado.

Repo de exemplo

Para obter um exemplo de repo, consulte https://github.com/collector-bank/collector-portal-framework.

Como reproduzir

1. Instale um pacote local com dependência de react-modal usando file:.. .
2. Execute npm run start .
3. Observe a falha de compilação com um erro semelhante ao mostrado abaixo:

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

Isso não tem nenhuma relação com "reagir ao fogo" e o emoji é confuso.

Uma solução alternativa que pode ser feita localmente é instalar @hot-loader/react-dom como devDependency e adicionar 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'
    }
  }
}

Tive que recompilar depois, mas funcionou!

@prevolorio você leu este tópico? ...

Seguindo a API de Gatsby , é melhor usar actions.setWebpackConfig , por exemplo

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

Ele se funde automaticamente com a configuração padrão.

Newb aqui. Onde coloco esse código? gatsby-node.js?

@TriStarGod sim, é onde o gancho da API "vive". Esse trecho de código deve ser inserido em gatsby-node.js

@TriStarGod Diz bem na página que

Uso: implemente qualquer uma dessas APIs exportando-as de um arquivo denominado gatsby-node.js na raiz do seu projeto.

Também recebo este aviso no Windows 10, mas não no Ubuntu Linux ou macOS. Estou me perguntando se este aviso é específico para usuários do Windows.

@kimbaudi Também tenho esse erro em um sistema windows, sabe se ficará ok em um ambiente de produção em linux ??

Tentei essa solução para o pacote inicial do Gatsby e não funcionou. Alguma coisa mudou recentemente?

Isso de repente começou a aparecer em um projeto em que eu estava trabalhando, por que isso está acontecendo. eu quebrei algo, posso simplesmente ignorar o aviso?

+1

Vendo esse problema também, em uma máquina com Windows 10 via Chrome (se for relevante)

+1 mesmo aqui. E a solução alternativa com @hot-loader/react-dom não funciona (tentei as duas versões) - dev falhou com Error: Cannot find module 'react-dom/server'

Também recebo isso na minha caixa do Windows no trabalho. Vou verificar na caixa do meu Macbook pessoal mais tarde para ver se obtenho resultados diferentes.

Estou começando a ver isso novamente desde a atualização reagir à versão mais recente.

executando: yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom resolveu o problema para mim.
De: react-dom - edição hot-loader Rewire - (Yarn) Qualquer outro sistema

executando: yarn add react-dom<strong i="6">@npm</strong>:@hot-loader/react-dom resolveu o problema para mim.
De: react-dom - edição hot-loader Rewire - (Yarn) Qualquer outro sistema

ou npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
es .: npm add @hot-loader/[email protected]
e adicione 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' } } }
execute gatsby develop
resolveu o problema para mim.

Ainda é uma correção relevante que preciso fazer em todos os meus sites gatsby para garantir um processo de desenvolvimento mais suave. Caso contrário, o recarregamento a quente realmente falha intermitentemente no ambiente de desenvolvimento do host local.

Estou usando yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom mas no projeto de espaços de trabalho do yarn com a lerna, há problemas desagradáveis ​​que não consegui consertar. Tentei nohoist, mas não está funcionando como eu pensava inicialmente.

Como se alguém tivesse resolvido isso? Acho que esse método (aliasing de pacotes) pode causar esse problema, mas não tenho 100% de certeza.

Instalar `@ hot-loader / react-dom" e adicionar a configuração do webpack a gatsby-node.js é uma solução alternativa ou permanente? Se for permanente, não deveria ser integrado ao Gatsby? Se for uma solução alternativa, o que será ser o gatilho para removê-lo?

Eu também gostaria de acrescentar que encontrei certas páginas que simplesmente não eram renderizadas após a atualização do Ant Design 4.1.5 para a v4.2.0. Eles refatoraram o componente List.Item para usar ganchos, e eu estava recebendo um erro React sobre um componente funcional tentando retornar um componente de classe. A aplicação do patch resolveu totalmente o problema. Moral da história: o aviso "patch react-🔥-dom não foi detectado" realmente pode causar problemas!

@wardpeet Eu substituo react-dom por @ hot-loader / react-dom para remover este aviso.

obrigado seu trabalho

Qualquer notícia?
Devemos ir em frente e consertá-lo manualmente em nossos projetos, como sugeriu @wardpeet ?

Devo dizer que isso é um sintoma de tanto desenvolvimento web hoje em dia. Um erro aleatório causado por uma alteração aleatória sem solução óbvia que não envolve o lançamento de algumas correções de sucesso e esperança que você tenta apenas no caso de funcionarem e não entender realmente por que funcionam ou não. Sim, eu deveria me envolver mais nos repositórios, mas, ei, não consigo nem fazer o Gatsby funcionar sem um monte de avisos aleatórios, então seria inútil. Meus 2 centavos.

Venho aqui sempre que começo um projeto com:
https://github.com/gatsbyjs/gatsby-starter-default

Então, estou escrevendo esta nota para mim e para qualquer outra pessoa que rolar até aqui 👋 (Olá, futuro eu)

Passo 1

Execute este comando - mas executá-lo sozinho não resolverá o problema:

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

Passo 2

Modifique gatsby.node.js para adicionar o seguinte:

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

Use o código acima sobre os outros mencionados aqui porque:
https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment -538662592

"É melhor usar actions.setWebpackConfig porque ele se funde automaticamente com a configuração padrão"

você também pode usar GATSBY_HOT_LOADER=fast-refresh . Estamos felizes em aceitar um PR para tornar @ hot-loader o padrão para desenvolvimento

você precisa adicionar a versão correspondente para react-hot-dom em seu arquivo de pacote

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

e na configuração do seu webpack, você precisa adicionar

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

Isso ajudaria a descobrir o que você precisa fazer https://github.com/gatsbyjs/gatsby/pull/26927 ?

@wardpeet - Acabei de dar uma

Não tenho certeza sobre os outros, mas descobri por meio do aviso do console ... Em vez de encontrar qualquer falha de funcionalidade.

Adicionar as etapas para resolver o problema no console especificando a versão necessária para instalação é perfeito 🎉

Tentei a solução sugerida:

• instalado "@ hot-loader / react-dom": "^ 16.8.6"
• adicionou esta seção em gatsby-config.js :

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

mas não está funcionando para mim.

Alguma sugestão?

λ gatsby info

Sistema:
SO: Windows 10 10.0.16299
CPU: (8) x64 Intel (R) Core (TM) i7-6700HQ CPU @ 2,60 GHz
Binários:
Nó: 14.6.0 - C: \ Program Filesnodejsnode.EXE
Yarn: 1.22.4 - C: \ Arquivos de programas (x86) \ Yarn \ binyarn.CMD
npm: 6.14.6 - C: \ Program Filesnodejs \ npm.CMD
Línguas:
Python: 3.8.1 - / c / Users / ccordero / AppData / Local / Programs / Python / Python38 / python
Navegadores:
Edge: Spartan (41.16299.1004.0)
npmPacotes:
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

ATUALIZAR:
Revirei as etapas anteriores e esta solução finalmente removeu o aviso:

executando: yarn add react-dom<strong i="37">@npm</strong>:@hot-loader/react-dom resolveu o problema para mim.
De: react-dom - edição hot-loader Rewire - (Yarn) Qualquer outro sistema

Passo 1

Execute este comando - mas executá-lo sozinho não resolverá o problema:

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

Passo 2

Modifique gatsby.node.js para adicionar o seguinte:

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

Use o código acima sobre os outros mencionados aqui porque:
# 11934 (comentário)

"É melhor usar actions.setWebpackConfig porque ele se funde automaticamente com a configuração padrão"

A instalação falhou para mim, eu tenho que adicionar minha versão atual do react.

Postagem de @zaktwist funcionou (https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment-597560317)
npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
Por exemplo npm add @hot-loader/[email protected]