Gatsby: 모든 gatsby 명령에 대한 모호한 "StoreStateProvider"오류

2.17.10에서 2.18.4로 업데이트 한 후에도 동일한 문제가 발생합니다.

신고 해주셔서 감사합니다!

gatsby-cli를 업그레이드 할 수도 있습니까? 이것이 도움이되지 않는다면, 우리에게 복제 저장소를 제공해 주시면 정말 도움이 될 것입니다.

감사합니다! : purple_heart :

실제로 전 세계적으로 CLI가 설치되어 있지 않습니다. 이 프로젝트는 로컬에 설치된 Gatsby 버전을 사용하여 gatsby <command> 를 차례로 실행하는 npm run <command> 명령에 의존합니다.

이 패턴을 사용하는 사람들은 전 세계적으로 의존하는 기계를 버릴 필요가 없습니다. (잠재적으로 다른 버전이 필요한 여러 프로젝트에서 작업하면 추악해질 수 있음)

오늘 초반 비슷한 문제가 있었는데 반응, react-dom 및 gatsby를 업데이트하고 node_modules 및 package-lock.json을 지우는 것이 효과적이었습니다. 마지막으로 npm install을 다시 실행하고 모든 것이 잘 작동했습니다.

react 및 react-dom 및 Gatsby 업데이트가 작동하는 것 같습니다. Gatsby가 호환되는 올바른 React 버전을 나열해야하지 않습니까?

어제 나는 deps가 실로 설치 될 때 개츠비 빌드 / 개발이 잘 작동하는지 알아 내기 위해 반나절을 보냈다.

React와 Gatsby 간의 호환성 문제와 관련이있는 것 같습니다. 잠금 파일없이 처음부터 종속성을 설치하는 경우 패키지 관리자 (yarn 또는 npm)는 최신 버전 (package.json의 제한에 의해 허용됨) 만 가져옵니다.

제 경우에는 반응 버전이 package-lock.json 에 잠겨 있었기 때문에 새로 설치하더라도 Gatsby와 함께 업데이트되지 않았습니다.

동일한 문제가 발생합니다. 나는 gatsby, gatsby-cli, react 및 react-dom을 성공으로 업데이트했습니다. 확실한 해결책이 있습니까?

편집 : 나는 gatsby와 gatsby-cli를 제거하고 개별적으로 다시 설치했으며 수정 한 것 같습니다. 이상한 문제.

이 문제가 발생했습니다. 두 가지 버전의 반응이 설치되어 있기 때문입니다. npm ls react 를 실행하여 확인하세요. 내 package.json에 지정된 반응 버전이 있으며 gatsby / gatsby-cli 2.18.5에 다른 버전의 반응이있는 것처럼 보입니다.

이 페이지를 통해 문제를 알게되었습니다.

여전히 문제를 해결하는 중 ...

문제를 해결했습니다! npm을 사용하여 제거한 다음 react , react-dom 및 gatsby 를 (다시) 설치했습니다. 나는 그 정확한 순서로 그것을했다 (나는 순서가 중요 할 것이라고 믿지 않는다.

npm ls react 는 두 가지 버전을 표시하지만 동일하며 "중복 됨"으로 표시됩니다.

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

지금은 차단이 해제되어 있지만 여전히 우려 사항이 있습니다.
1) 두 가지 버전의 반응이 여전히 존재합니까? (잘 모르겠어) 지금은 같은 버전이라도
2) 향후 개츠비 업데이트로 인해이 문제가 다시 발생합니까?

답은 없지만 개츠비 팀이 고려할 우려를 표명합니다.

npm ls 는 프로젝트의 종속성 트리를 이해하는 데 도움이되는 도구 일 뿐이라고 확신합니다. 리 액트 복사본이 하나만 설치되었을 것입니다. node_modules 폴더로 들어가서 ...

개츠비를 업데이트 한 후에도 동일한 문제가 발생했습니다. 이전 버전 인 "gatsby": "^ 2.13.73"으로 다운 그레이드했는데 여러 버전이 돌아 왔지만 문제가 해결되었습니다.

문제를 해결했습니다! npm을 사용하여 제거한 다음 react , react-dom 및 gatsby 를 (다시) 설치했습니다. 나는 그 정확한 순서로 그것을했다 (나는 순서가 중요 할 것이라고 믿지 않는다.

npm ls react 는 두 가지 버전을 표시하지만 동일하며 "중복 됨"으로 표시됩니다.

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

이것은 나를 위해 일했습니다. 감사!

문제를 해결했습니다! npm을 사용하여 제거한 다음 react , react-dom 및 gatsby 를 (다시) 설치했습니다. 나는 그 정확한 순서로 그것을했다 (나는 순서가 중요 할 것이라고 믿지 않는다.

npm ls react 는 두 가지 버전을 표시하지만 동일하며 "중복 됨"으로 표시됩니다.

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

위와 마찬가지로이 솔루션은 저에게도 문제를 해결했습니다.

react 및 react-dom을 16.12.0으로 업그레이드 한 다음 gatsby를 2.18.7로 업그레이드하여 문제를 성공적으로 해결했습니다.

중요 : react, react-dom 및 gatsby를 업그레이드 한 후 "gatsby clean"을 실행해야합니다.

@clarmso가 제안한대로 gatsby를 2.18.7로 업그레이드하면 나에게 트릭이 생겼 습니다 (반응은 16.12.0 임).

또한 이와 동일한 문제가 있습니다. 반응 및 개츠비를 업데이트했지만 여전히 동일한 문제가 있습니다. 또한 업데이트 후 청소를 시도했지만 문제가 지속됩니다.

"개츠비": "^ 2.18.11"
"반응": "^ 16.12.0"
"react-dom": "^ 16.12.0"

또한 이와 동일한 문제가 있습니다. 반응 및 개츠비를 업데이트했지만 여전히 동일한 문제가 있습니다. 또한 업데이트 후 청소를 시도했지만 문제가 지속됩니다.

"개츠비": "^ 2.18.11"
"반응": "^ 16.12.0"
"react-dom": "^ 16.12.0"

저도 마찬가지입니다. yestarday가 잘 작동 할 때까지

문제를 해결했습니다! npm을 사용하여 제거한 다음 react , react-dom 및 gatsby 를 (다시) 설치했습니다. 나는 그 정확한 순서로 그것을했다 (나는 순서가 중요 할 것이라고 믿지 않는다.

npm ls react 는 두 가지 버전을 표시하지만 동일하며 "중복 됨"으로 표시됩니다.

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

이것은 나에게도 효과적이었습니다. 영구적 인 수정을 위해 작업 중입니까?

이러한 업데이트로 인해 이제 StoreStateProvider에 대한 더 이상한 경고와 Contentful의 임의의 항목이 존재하더라도 null로 돌아옵니다.

무슨 일이 일어나고 있는지 잘 모르겠지만 지금은 지점에 보관해야합니다.

또한 이와 동일한 문제가 있습니다. 반응 및 개츠비를 업데이트했지만 여전히 동일한 문제가 있습니다. 또한 업데이트 후 청소를 시도했지만 문제가 지속됩니다.

"개츠비": "^ 2.18.11"
"반응": "^ 16.12.0"
"react-dom": "^ 16.12.0"

node_modules 폴더 및 package-lock.json 파일을 제거했습니다. npm 설치를 실행하고 다시 모두 좋습니다.

내 경험은 위의 의견의 조합이었습니다. node_modules 폴더를 삭제하고 gatsby 플러그인이 있었기 때문에 npm이 작동하지 않습니다. 원사 설치가 마침내 수정했습니다.

react , react-dom 및 gatsby 을 (를) 다시 설치하여이 문제를 해결했습니다. (https://github.com/gatsbyjs/gatsby/issues/19827#issuecomment-559898690)

전에

react v16.11.0
react-dom v16.11.0
gatsby v2.17.11

후

react v16.12.0
react-dom v16.12.0
gatsby v2.18.12

문제를 해결했습니다! npm을 사용하여 제거한 다음 react , react-dom 및 gatsby 를 (다시) 설치했습니다. 나는 그 정확한 순서로 그것을했다 (나는 순서가 중요 할 것이라고 믿지 않는다.

npm ls react 는 두 가지 버전을 표시하지만 동일하며 "중복 됨"으로 표시됩니다.

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

감사합니다. 저에게 효과적이었습니다 🍾

개인적으로 node_modules 폴더와 package-lock.json 을 삭제해야합니다.
그런 다음 react , react-dom 및 gatsby 업그레이드합니다.

"react": "^16.12.0",
"react-dom": "^16.12.0",
"gatsby": "^2.18.17",

업데이트하는 것을 잊지 마세요 gatsby-cli 최신 버전 및 운영하는 gatsby clean
그 후 gatsby develop 가 매력처럼 작동합니다!

기본 개츠비 로거를 사용할 때만 문제가 발생한다는 것을 알았습니다. 사용될 특정 로거는 GATSBY_LOGGER 프로세스 env 를 통해 제어됩니다. 예를 들어 json 로거를 사용하여 기본 로거가 변경된 경우이 문제는 재현 할 수 없습니다.

export GATSBY_LOGGER=["json"]
npm i && npm run start 

yurnalist / json 전환하면 Gatsby 로거 수정 문제가 해결됩니다.

export GATSBY_LOGGER=["yurnalist"]

오늘 이전 프로젝트에서 gatsby develop 를 실행할 때이 문제가 발생했습니다 (최근 gatsby develop을 실행 한 것은 가을이었습니다).

위의 (매우 도움이되는!) 제안을 조합하여 수정했습니다.

이것이 작동했는지 확인할 수 있습니다.

1. gatsby clean -문제가 해결되었는지 확인하기 위해 시작했습니다.
2. node_modules 삭제
3. npm install

이 시점에서 해결되지 않았으므로이를 수행하기 위해 조언을 따랐습니다.

1. npm uninstall react react-dom gatsby
2. npm install react react-dom gatsby

이것은 완벽하게 작동했습니다.

package-lock.json 삭제
삭제 된 node_modules
npm i 실행

나를 위해 일했다 : D

문제를 해결했습니다! npm을 사용하여 제거한 다음 react , react-dom 및 gatsby 를 (다시) 설치했습니다. 나는 그 정확한 순서로 그것을했다 (나는 순서가 중요 할 것이라고 믿지 않는다.

npm ls react 는 두 가지 버전을 표시하지만 동일하며 "중복 됨"으로 표시됩니다.

[email protected] <redacted the filepath>
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected]

솔루션에 감사드립니다! 이것은 나를위한 주요 차단제였습니다. 처음에는 작동하지 않았지만 gatsby-cli 도 다시 설치했습니다. 그 후에는 잘 작동했습니다.

기술

Gatsby를 2.17.7에서 2.18.4로 업데이트 한 후 모든 종류의 gatsby 명령을 실행하면 오류가 발생합니다. 하지만 말 그대로 문맥이 없습니다.

> gatsby clean

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.

> gatsby build

The above error occurred in the <StoreStateProvider> component:

...

환경

불행히도 다른 명령과 동일한 StateStoreProvider 오류와 함께 충돌하므로 gatsby info --clipboard 실행할 수 없습니다. Gatsby 버전을 다시 되돌리고이 명령을 실행했습니다. 아래 출력의 Gatsby 버전은 올바르지 않습니다 .

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.16 - C:\Python27\python.EXE
  Browsers:
    Edge: 44.18362.267.0
  npmPackages:
    gatsby: ^2.17.7 => 2.17.7
    gatsby-source-apiserver: ^2.1.4 => 2.1.4

나는 같은 문제에 직면했다! 나를 돕는 솔루션은 yarn을 설치하고 package.json에 해상도 필드를 추가하는 것입니다.
https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

이 오류는 gatsby-cli 내부적으로 react 와 ink 를 사용하여 새 인터페이스를 렌더링 한 결과입니다. 프로젝트의 react 버전과 gatsby 필요한 버전 간의 버전 관리가 잘못되어이 문제가 발생했습니다.

전 세계적으로 gatsby-cli 설치 (권장)하면 내가 아는 한 이러한 문제를 방지 할 수 있습니다. 그럼에도 불구하고 이것과 관련하여 gatsby 에서 수정해야 할 것이 없기 때문에 이것을 닫습니다.

여러분 모두 감사합니다! 💜

어제 나는 deps가 실로 설치 될 때 개츠비 빌드 / 개발이 잘 작동하는지 알아 내기 위해 반나절을 보냈다.

효과적으로 실을 사용하면 나도 문제가 해결되었습니다.

npm update 만 실행하면 문제가 해결되었습니다.

gatsby-cli를 전역으로 설치 (권장)하면 내가 아는 한 이러한 문제를 방지 할 수 있습니다. 그럼에도 불구하고 이것과 관련하여 개츠비에서 수정해야 할 것이 없기 때문에 이것을 닫습니다.

이것은 나를 위해 작동하지 않았습니다. 위에서 언급 한대로 로거를 yurnalist 또는 json 로 전환했습니다. public , .cache 및 node_modules 폴더도 제거했습니다.

개츠비 버전의 출력 :

gatsby -v
Gatsby CLI version: 2.8.27
Gatsby version: 2.18.25

궁금한 경우 내 종속성은 다음과 같습니다.

    "dependencies": {
        "@emotion/core": "^10.0.27",
        "@emotion/styled": "^10.0.27",
        "gatsby": "^2.18.25",
        "gatsby-image": "^2.2.39",
        "gatsby-plugin-emotion": "^4.1.21",
        "gatsby-plugin-google-analytics": "^2.1.33",
        "gatsby-plugin-manifest": "^2.2.37",
        "gatsby-plugin-netlify": "^2.1.31",
        "gatsby-plugin-offline": "^3.0.32",
        "gatsby-plugin-react-helmet": "^3.1.21",
        "gatsby-plugin-sharp": "^2.3.13",
        "gatsby-plugin-web-font-loader": "^1.0.4",
        "gatsby-remark-images": "^3.1.42",
        "gatsby-remark-prismjs": "^3.3.30",
        "gatsby-remark-reading-time": "^1.1.0",
        "gatsby-source-filesystem": "^2.1.46",
        "gatsby-transformer-remark": "^2.6.48",
        "gatsby-transformer-sharp": "^2.3.13",
        "prism-themes": "^1.3.0",
        "prismjs": "^1.19.0",
        "prop-types": "^15.7.2",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-helmet": "^5.2.1",
        "typeface-karla": "0.0.72"
    },

내가받은 오류는 다음과 같습니다.

gatsby develop

 ERROR 

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.


 ERROR 

Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.


 ERROR 

UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.



  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could   happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

  - react.development.js:1590 resolveDispatcher
    [project]/[gatsby]/[react]/cjs/react.development.js:1590:13

  - react.development.js:1618 useState
    [project]/[gatsby]/[react]/cjs/react.development.js:1618:20

  - context.js:17 StoreStateProvider
    [project]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/context.js:17:41

  - react-reconciler.development.js:6036 renderWithHooks
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:6036:18

  - react-reconciler.development.js:8570 mountIndeterminateComponent
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:8570:13

  - react-reconciler.development.js:9938 beginWork$1
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:9938:16

  - react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:11563:10

  - react-reconciler.development.js:11740 invokeGuardedCallback
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:11740:31

  - react-reconciler.development.js:15778 beginWork$$1
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:15778:7

  - react-reconciler.development.js:14696 performUnitOfWork
    [project]/[react-reconciler]/cjs/react-reconciler.development.js:14696:12

애초에 존재해서는 안되는 문제를 찾는 필사적 인 개발자에게 :

-node_modules 폴더 제거
-package.lock.json 삭제
-npm i 실행

복제 케이스를 손에 넣은 후 :

NPM은의 사용자 정의 버전 설치와 함께이 사건에서 온 것으로 보인다 react 안에 설치가 node_modules 하면서, gatsby-cli 반응의 버전에 설치됩니다 node_modules/gatsby/node_modules .

ink 가 node_modules 설치되는 것으로 보이므로 ink react 가져 오기는 gatsby-cli 가져 오기와 다른 가져 오기를 사용하므로 다음과 같은 경우가 발생합니다.

1. 동일한 앱에 둘 이상의 React 사본이있을 수 있습니다.
   이 문제를 디버그하고 수정하는 방법에 대한 팁은 https://fb.me/react-invalid-hook-call 을 참조

그리고 https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react는 이것을 꽤 잘 설명하지만 거기에있는 제안 ( yarn resolutions 을 사용하는 것은 문제이기 때문에 작동하지 않습니다) npm 가 node_modules 구조를 결정하는 것처럼 보이며 실이 아닌)

지금 내 마음에 떠오르는 유일한 해결책은 Node.js 모듈 해상도를 재정의하고 react 을 gatsby-cli 정의 된 것으로 하드 코딩하는 것입니다. 그렇게해도 괜찮을 수 있습니다 (PnP가 적어도 yarn v1에서 구현되는 방식입니다).

몇 가지 더 생각한 후-다른 옵션은 createRequireFromPath 에서 gatsby-core-utils createRequireFromPath 를 사용하는 것입니다 (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-core-utils/README .md # createrequirefrompath)를 사용하고 gatsby-cli에서 ink 와 동일한 버전의 반응을로드하는 데 사용합니다 (이는 해키가 훨씬 적고 Node.js 모듈 확인 오버로드로 인해 발생할 수있는 잠재적 문제의 가능성이 적습니다). .

유일한 문제는 타사 ink 구성 요소 ( ink-spinner 는 현재 사용중인 구성 요소 중 하나임)를 사용하고 ink 과 다른 디렉터리에 설치되는 경우에만 발생합니다.

ink-spinner 내부에서 gatsby-cli 공급하고 타사 구성 요소를 패키지로 사용하지 않도록하여 잠재적 인 문제를 해결할 수 있습니다 (및 모두 공급 업체).

--- 편집 :
위에서주의해야합니다. ink 에는 node >= 16.8.0 이 필요하므로 gatsby-cli 에서 react >= 16.8.1 이후의 기능을 사용하지 않도록해야합니다.- 더 많은 연구가 필요하지만 유망합니다.

업데이트 : createRequireFromPath 경로를하지 않습니다 일 때문에 npm 그냥 "제대로"해결할 수 node_modules 계층 구조는 주어진 dependencies 및 peerDependencies 제공 : ink 및 gatsby-cli .

"빠른"변경 사항은 react 버전 요구 사항 (https://github.com/gatsbyjs/gatsby/pull/21522)을 낮추어이 문제가 발생할 시나리오의 양을 줄이는 것입니다.

그러나 이것이 완전히 고쳐지지는 않습니다. 이를 위해 npm node_modules 계층 구조를 제대로 생성하지 못하는 문제를 해결하기 위해 react 버전을 gatsby-cli 에 번들로 묶을 것입니다 (또는 Node.js 모듈 확인을 재정의하지만 이것은 예상치 못한 결과를 초래할 수있는 해킹이므로 다른 해결책이 있으면 피하고 싶습니다.)

또 다른 업데이트 - 우리는 일부 업데이트했다 gatsby 가 출판되었다 - 그것의 영향을 제한 프로젝트를 [email protected] -하지만 여전히 / 다시 삭제해야 할 수도 package-lock.json .

그래도 문제가 해결되지 않으면 react / react-dom 이 (가) package.json 고정되어 있고 버전이 [email protected] 보다 낮을 수 있습니다.- 우리가 아직 그것에 대해 수정을 가지고 있지 않지만 다음 단계로 조사하고 있습니다 - 가능한 해결 방법은 사용 yarn 대신 npm 지금 (확인되지 않음).

누군가가 기술적 인 것에 관심이 있다면 초기 Pull Request에 대한 의견을 확인 하십시오 -https://github.com/gatsbyjs/gatsby/pull/21508#issuecomment -586753917 현재 계획은 일부 번 들러를 사용하는 것입니다 (아마 microbundle ) 번들하기 react 에서 gatsby-cli 가 사용하려고하지 않도록 react 에서 node_modules 다만이있을 것이다 gatsby-cli 직접 포함)

나는 이러한 코멘트를 많이 시도했지만, 프로세스의 어떤 부분에도 npm 를 사용하지 않은 사람으로서 나는 특별히 저에게 효과가있는 것을 쓸 것이라고 생각했습니다.

내 설정 :

Win10, .msi를 통해 설치된 Yarn, yarn global 를 통해 Gatsby. 모든 Gatsby 프로젝트에 yarn 사용.

문제:

gatsby {command} 는 StoreStateProvider 오류를 생성하지만 npx gatsby {command} 는 작동합니다.

해결책:

1. .cache 및 /node_modules 있으면 삭제합니다.
2. react 및 react-dom 이 (가)이 글을 쓰는 시점에서 "^16.13.0" 업데이트되었는지 확인합니다.
3. yarn global remove gatsby gatsby-cli 를 실행하여 손상된 CLI를 제거합니다.
4. yarn global add gatsby gatsby-cli 를 실행하여 CLI를 다시 설치하십시오.
5. gatsby -v 또는 다른 gatsby {command} 를 실행하면 작동합니다.

산출:

> gatsby -v
Gatsby CLI version: 2.9.0
Gatsby version: 2.19.23

히야!

이 문제는 조용해졌습니다. 무시 무시한 조용함. 👻

많은 문제가 발생하므로 현재 30 일 동안 활동이 없으면 문제를 해결합니다. 여기서 마지막으로 업데이트 한 지 20 일이 지났습니다.
이 문제를 놓쳤거나 계속 열려고 싶다면 여기에서 답장 해주세요. 이 문제를 계속 열어두기 위해 "부실하지 않음"이라는 레이블을 추가 할 수도 있습니다.
이 문제 나 다른 문제를 해결하는 가장 좋은 방법은 Pull Request를 여는 것입니다. PR 열기, 문제 분류 및 기여에 대한 자세한 정보는 gatsby.dev/contribute 를 확인하십시오!

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

활동이별로 없지만 낡은 것 같진 않네요

나는이 같은 문제를 겪고 있었는데, 내가 한 일은 json.lock을 삭제하고 yarn 명령을 실행하여 종속성을 업데이트하는 것입니다. 모든 것이 정상적으로 작동하게되었습니다.

"node_modules"폴더와 "package-lock.json"파일을 삭제 한 다음 "npm install"명령을 삭제하여 해결 한 것과 동일한 문제가 발생했습니다.

히야!

이 문제는 조용해졌습니다. 무시 무시한 조용함. 👻

많은 문제가 발생하므로 현재 30 일 동안 활동이 없으면 문제를 해결합니다. 여기서 마지막으로 업데이트 한 지 20 일이 지났습니다.
이 문제를 놓쳤거나 계속 열려고 싶다면 여기에서 답장 해주세요. 이 문제를 계속 열어두기 위해 "부실하지 않음"이라는 레이블을 추가 할 수도 있습니다.
이 문제 나 다른 문제를 해결하는 가장 좋은 방법은 Pull Request를 여는 것입니다. PR 열기, 문제 분류 및 기여에 대한 자세한 정보는 gatsby.dev/contribute 를 확인하십시오!

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

또 안녕!

이 문제에 대해 무슨 일이 일어난 지 30 일이 지났으므로 우리의 친절한 이웃 로봇 (나야!)이 문을 닫을 것입니다.
저는 로봇 일 뿐이므로이 문제를 실수로 종료했다면 HUMAN_EMOTION_SORRY 입니다. 이 문제를 다시 열거 나 다른 것이 필요하면 새 문제를 만드십시오.
이 문제 나 다른 문제를 해결하는 가장 좋은 방법은 Pull Request를 여는 것입니다. PR 열기, 문제 분류 및 기여에 대한 자세한 정보는 gatsby.dev/contribute 를 확인하십시오!

Gatsby 커뮤니티에 참여해 주셔서 다시 한 번 감사드립니다! 💪💜

: slightly_frowning_face : 저는 여전히 yurnalist 을 기본 로거로 사용하고 있습니다. 나는 이것이 수정되었다는 업데이트를 보지 못했습니다.

애초에 존재해서는 안되는 문제를 찾는 필사적 인 개발자에게 :

-node_modules 폴더 제거
-package.lock.json 삭제
-npm i 실행

이것은 나를 위해 일했습니다 ...

gatsby (v 2.23.11)을 제거하고 다시 설치하는 것이 저에게 효과적이었습니다.

실 설치를 사용하십시오.

그래서 내가 한 일은 (지금까지 모든 것을 읽은 후) Gatsby 2.18.7의 package.json 파일에서 버전을 변경하고 npm i 했습니다.

여전히이 문제가 발생합니다.

$: gatsby -v
Gatsby CLI version: 2.12.66
Gatsby version: 2.23.12

재현 단계 :

1. gatsby new 를 사용하여 새 프로젝트 만들기
2. npm i --save node-sass gatsby-plugin-sass 사용하여 sass 설치
3. gatsby develop

결과

$ gatsby develop

 ERROR

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.


 ERROR

Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.


 ERROR

UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.



  Error: Invalid hook call. Hooks can only be called inside of the body of a fun  ction component. This could happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as Reac  t DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See https://fb.me/react-invalid-hook-call for tips about how to debug and fix   this problem.

  - react.development.js:1465 resolveDispatcher
    [bug]/[gatsby]/[react]/cjs/react.development.js:1465:13

  - react.development.js:1496 useState
    [bug]/[gatsby]/[react]/cjs/react.development.js:1496:20

  - context.js:21 StoreStateProvider
    [bug]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/context.js:21:49

  - react-reconciler.development.js:6036 renderWithHooks
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:6036:18

  - react-reconciler.development.js:8570 mountIndeterminateComponent
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:8570:13

  - react-reconciler.development.js:9938 beginWork$1
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:9938:16

  - react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:11563:10

  - react-reconciler.development.js:11740 invokeGuardedCallback
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:11740:31

  - react-reconciler.development.js:15778 beginWork$$1
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:15778:7

  - react-reconciler.development.js:14696 performUnitOfWork
    [bug]/[ink]/[react-reconciler]/cjs/react-reconciler.development.js:14696:12

위에서 설명한대로 다음을 수행하여 지침을 구현하여이 문제를 해결했습니다. ☝️

그래서 내가 한 일은 (지금까지 모든 것을 읽은 후) Gatsby 2.18.7의 package.json 파일에서 버전을 변경하고 실행했습니다.
npm i 효과가 있음

.cache 및 node_modules 폴더와 package-lock.json을 제거한 다음 다시 설치하면 저에게 효과적이었습니다.

나는 실을 업그레이드했고 그것은 나를 위해 일했습니다.

node_modules , npm 캐시 및 package-lock.json 파일을 제거하는 것은 플러그인 또는 종속성이 추가 될 때마다 주요 변경 사항에 대한 비실용적 인 솔루션입니다.

내 경우의 근본적인 문제는 gatsby new [path] [starter] 사용하여 프로비저닝 된 새 프로젝트가 yarn 가 설치되어 있고 사용 가능한 경우 종속성을 부트 스트랩하기 위해 암시 적으로 yarn 를 사용한다는 것입니다 ( which yarn 반환 비어 있지 않은 문자열). npm 및 yarn 은 (는) 상호 배타적 인 패키지 관리 솔루션이기 때문에 npm 을 (를) 사용하여 플러그인 / 종속성을 설치하려는 후속 시도는 위에 게시 된 것처럼 암호 오류와 함께 실패합니다.

gatsby cli가이를 요청하는 명령 줄 옵션없이 yarn 를 기본값으로 설정 하지 않는 것이 좋습니다. 나를위한 해결책은 yarn 을 npm 만 사용할 수 있도록하는 것이 었습니다.

https://github.com/gatsbyjs/gatsby/pull/26887 제거 (병합 어제 발표 오늘) react 의 종속에서 gatsby-cli 우리는 패키지를 게시 할 때 대신하고 그것을 번들 - 어떤이 의미는 모든 종류의 문제를 일으키는 node_modules 에서 react 의 이상한 여러 복사본이 생성되지 않아야한다는 것입니다.

@ duchess-toffee https://github.com/gatsbyjs/gatsby/pull/26856 흥미로운 것을 찾을 수 있습니다 (아직 병합 / 출시되지 않음)- yarn 에서 npm 자동 복귀되지는 않습니다. gatsby options set pm npm 를 실행할 수 있습니다.

이 문제와 관련된 것으로 보이는 문제가 있습니다. # 26998

사용자 정의 웹팩 구성을 사용하여 react 해결 :

````js
// 파일 : gatsby-node.js
const 경로 = require ( 'path')

module.exports = {
onCreateWebpackConfig : ({작업}) => {
actions.setWebpackConfig ({
해결 : {
별칭 : {
'반응': path.resolve (path.join (__ dirname, 'node_modules', 'react'))
}
}
})
}
}
````

json // file: package.json { "dependencies": { "@mdx-js/mdx": "^1.6.18", "@mdx-js/react": "^1.6.18", "gatsby": "^2.24.64", "gatsby-plugin-layout": "^1.3.11", "gatsby-plugin-mdx": "^1.2.40", "gatsby-plugin-sass": "^2.3.12", "gatsby-source-filesystem": "^2.3.30", "gatsby-telemetry": "^1.3.35", "node-sass": "^4.14.1", "react": "^16.13.1", "react-dom": "^16.13.1", "react-ionicons-v5": "^1.2.0", "three": "^0.120.1" } }

이제 모든 것이 원활하게 실행됩니다.