이 경고도 본 적이 있음을 확인할 수 있습니다. 또한 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 는 @kripod의 코드베이스 를 사용합니다. package.json 파일에서 react-dom 안에 dependencies 있습니다. 그런 다음 react-dom 를 @hot-loader/react-dom .

나는 이 경고를 gatsby-starter-default로 재현합니다.

그럼 어떻게 해야 할까요?

"리액트 파이어"가 출시될 때까지 기다리시겠습니까? 또는 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일이 지났습니다.

이 문제를 놓쳤거나 계속 공개하고 싶다면 여기에서 회신해 주세요. 이 문제를 계속 공개하기 위해 "not stale" 레이블을 추가할 수도 있습니다!

Gatsby 커뮤니티의 일원이 되어주셔서 감사합니다! 💪💜

오래되지 않아!

새로운 사람들이 뭔가 잘못했다는 인상을 줄 수 있기 때문에 로드맵에 추가했습니다.

해결 방법을 적용하면 무엇을 기대할 수 있습니까? @misterbridge 와 같은 핫 리로딩이 제거됩니까? 핫 리로딩이 계속 작동하는 해결 방법을 찾은 사람이 있습니까?

이 문제를 최대한 빨리 해결하도록

나는 새로운 PR을 만들었습니다. https://github.com/gatsbyjs/gatsby/pull/13713 이것이 몇 가지 저장소에서 테스트될 수 있다면 재미있을 것입니다.

#13713에서 수정된 것 같습니다.

마지막 개츠비 버전에서 경고를 제거하기 위해 여전히 exports.onCreateWebpackConfig 패치가 필요합니까? 아니면 경고를 무시할 수 있습니까?

React 16.9.0 사용하기

다시 돌아온 것 같다.

새로운 시작 프로젝트에서도 이것을 보고 있습니다.

패키지 파일에 react-hot-dom에 대해 일치하는 버전을 추가해야 합니다.

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

웹팩 구성에서 다음을 추가해야 합니다.

별칭: { '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 를 종속성으로 사용하는 두 개의 다른 프로젝트에서 이것을 테스트했으며 둘 다 동일한 오류로 실패합니다. react-modal 는 react-dom 종속되어 있지만 위의 패치가 적용되면 해결할 수 없습니다.

예시 리포지토리

예시 리포지토리는 https://github.com/collector-bank/collector-portal-framework를 참조

번식 방법

1. react-modal 사용하여 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",
        },
      },
    })
  }
}

기본 구성과 자동으로 병합됩니다.

여기 뉴비. 이 코드를 어디에 넣어야 하나요? 개츠비 노드.js?

@TriStarGod 예, API 후크가 "살아있는"곳입니다. 해당 코드 스니펫은 gatsby-node.js 삽입되어야 합니다.

@TriStarGod 제가 링크한 페이지에 바로 나와있어요...

사용법: 프로젝트 루트에 있는 gatsby-node.js라는 파일에서 API를 내보내 이러한 API를 구현합니다.

Windows 10에서도 이 경고가 표시되지만 Ubuntu Linux 또는 macOS에서는 표시되지 않습니다. 이 경고가 Windows 사용자에게만 해당되는지 궁금합니다.

@kimbaudi Windows 시스템 괜찮을지 아십니까 ??

Gatsby 스타터 패키지에 대해 이 솔루션을 시도했지만 작동하지 않았습니다. 최근에 변경된 것이 있습니까?

이것은 내가 작업하고 있던 프로젝트에 갑자기 나타나기 시작했습니다. 왜 이런 일이 발생합니까? 경고를 무시해도 될까요?

+1

Chrome을 통해 Windows 10 컴퓨터에서 이 문제도 표시됨(해당되는 경우)

+1 여기도 마찬가지입니다. 그리고 @hot-loader/react-dom 사용한 해결 방법이 작동하지 않습니다(두 버전 모두 시도) - dev는 Error: Cannot find module 'react-dom/server' 실패합니다.

또한 직장에서 내 WINdows 상자에 이것을 얻고 있습니다. 나중에 다른 결과를 얻을 수 있는지 확인하기 위해 내 개인 Macbook 상자에서 확인합니다.

업데이트가 최신 버전에 반응한 이후로 이것을 다시 보기 시작했습니다.

running: yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom 이 문제를 해결했습니다.
From: react-dom - 핫로더 에디션 Rewire - (Yarn) 기타 시스템

running: yarn add react-dom<strong i="6">@npm</strong>:@hot-loader/react-dom 이 문제를 해결했습니다.
From: react-dom - 핫로더 에디션 Rewire - (Yarn) 기타 시스템

또는 npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
예: 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가 있는 원사 작업 공간 프로젝트에는 수정할 수 없는 불쾌한 문제가 있습니다. 노호이스트를 시도했지만 처음에 생각한 대로 작동하지 않습니다.

누군가가 그것을 해결 했습니까? 이 방법(패키지 별칭 지정)이 이 문제를 일으킬 수 있다고 생각하지만 100% 확신할 수는 없습니다.

`@hot-loader/react-dom"을 설치하고 웹팩 구성을 gatsby-node.js에 추가하는 것이 해결 방법입니까 아니면 영구적인 솔루션입니까? 영구적인 경우 Gatsby에 내장해야 하지 않습니까? 해결 방법이라면 어떻게 될까요? 우리가 그것을 제거하는 방아쇠가 되겠습니까?

또한 Ant Design 4.1.5에서 v4.2.0으로 업데이트한 후 렌더링되지 않는 특정 페이지에 도달했다고 덧붙이고 싶습니다. 후크를 사용하도록 List.Item 구성 요소를 리팩토링했는데 클래스 구성 요소를 반환하려는 기능 구성 요소에 대한 React 오류가 발생했습니다. 패치를 적용하면 이 문제가 완전히 해결되었습니다. 이야기의 교훈: "react-🔥-dom 패치가 감지되지 않았습니다." 경고는 실제로 문제를 일으킬 수 있습니다!

@wardpeet 이 경고를 제거하기 위해 react-dom 를 @hot-loader/react-dom 으로 바꿉니다 .

그 일을 감사합니다

소식이 있나요?
@wardpeet이 제안한 대로 프로젝트에서 수동으로 수정해야 합니까?

나는 이것이 요즘 웹 개발이 너무 많은 징후라고 말해야합니다. 일부 적중 및 희망 수정을 시작하는 것을 포함하지 않는 명백한 솔루션이 없는 무작위 변경으로 인해 발생하는 무작위 오류입니다. 예, repos에 더 참여해야 하지만 이봐, 나는 많은 무작위 경고 없이 Gatsby를 실행할 수 없기 때문에 쓸모가 없을 것입니다. 내 2센트.

나는 다음으로 프로젝트를 시작할 때마다 여기에 옵니다.
https://github.com/gatsbyjs/gatsby-starter-default

그래서 저와 여기까지 스크롤 해주시는 분들을 위해 이 글을 씁니다 👋 (헤이 퓨처미)

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",

웹팩 구성에서 다음을 추가해야 합니다.

별칭: { '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' } } }); } };

하지만 그것은 나를 위해 작동하지 않습니다.

어떠한 제안?

λ 개츠비 정보

체계:
운영 체제: 윈도우 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
언어:
파이썬: 3.8.1 - /c/Users/ccordero/AppData/Local/Programs/Python/Python38/python
브라우저:
에지: 스파르타(41.16299.1004.0)
npm패키지:
개츠비: ^2.18.18 => 2.24.33
개츠비 플러그인 매니페스트: ^2.4.22 => 2.4.22
개츠비 플러그인 오프라인: ^3.2.22 => 3.2.22
gatsby-source-graphql: ^2.7.0 => 2.7.0
개츠비 테마 코드부시: 1.0.0 => 1.0.0

업데이트:
이전 단계를 롤백했으며 이 솔루션은 마침내 경고를 제거했습니다.

running: yarn add react-dom<strong i="37">@npm</strong>:@hot-loader/react-dom 이 문제를 해결했습니다.
From: react-dom - 핫로더 에디션 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를 사용하는 것이 좋습니다"

설치에 실패했습니다. 현재 반응 버전을 추가해야 합니다.

@zaktwist의 게시물이
npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
예: npm add @hot-loader/[email protected]