Gatsby: すべてのgatsbyコマンドのあいまいな「StoreStateProvider」エラー

2.17.10から2.18.4にアップデートした後、同じ問題が発生しています。

報告ありがとうございます！

gatsby-cliのアップグレードもお試しいただけますか？ これで問題が解決しない場合は、複製リポジトリを提供していただければ非常に役立ちます。

ありがとうございました！ ：パープルハート：

私は実際にCLIをグローバルにインストールしていません。 プロジェクトはnpm run <command>コマンドに依存しており、ローカルにインストールされたバージョンのGatsbyを使用してgatsby <command>実行します。

そのパターンを使用すると、人々は自分のマシンにグローバルな依存関係を散らかす必要はありません。 （異なるバージョンを必要とする可能性のある複数のプロジェクトで作業する場合、これは醜くなる可能性があります）

今日、私は同様の問題を抱えていました。私にとってうまくいったのは、react、react-dom、gatsbyを更新し、node_modulesとpackage-lock.jsonを消去することでした。 最後に、npm installを再度実行すると、すべてが正常に機能しました

reactとreact-dom 、およびGatsbyの更新react機能しているようです。 Gatsbyは、互換性のあるReactの正しいバージョンをリストするべきではありませんか？

昨日、私は半日を費やして、私の場合、デップに糸を取り付けたときにgatsbyのビルド/開発が正常に機能していることを確認しました。

ReactとGatsbyの互換性の問題に関係しているようです。 依存関係を最初から（ロックファイルなしで）インストールする場合、パッケージマネージャー（yarnまたはnpm）は最新の（package.jsonの制約で許可されている）バージョンを取得します。

私の場合、reactバージョンはpackage-lock.jsonでロックダウンされていたため、新規インストールでもGatsbyと一緒に更新されませんでした。

同じ問題が発生しています。 gatsby、gatsby-cli、react、react-domを更新しましたが、成功しませんでした。 決定的な解決策はありますか？

編集：gatsbyとgatsby-cliを削除し、個別に再インストールしましたが、修正されたようです。 奇妙な問題。

私はこの問題にぶつかった。 これは、2つのバージョンのreactがインストールされているためです。 npm ls reactを実行してそれらを確認します。 package.jsonでreactのバージョンが指定されていますが、gatsby / gatsby-cli2.18.5のreactのバージョンが異なるようです。

私はこのページを通して問題を知りました。

まだ問題を修正しようとしています...

問題を修正しました！ npmを使用してアンインストールしてから、 react 、 react-dom 、およびgatsby （再）インストールしました。 私はその正確な順序でそれを行いました（順序が重要であるとは思わないが、そうなる場合は参考までに）。

npm ls reactは2つのバージョンを示していますが、それらは同じであり、「重複」としてマークされています。

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

今のところブロックが解除されていますが、まだ懸念があります。
1）2つのバージョンのreactがまだ存在しますか？ （よくわかりません）同じバージョンであっても
2）将来のgatsbyの更新により、この問題が再び発生しますか？

答えはありませんが、ギャツビーチームが検討するために私の懸念を表明します。

npm lsは、プロジェクトの依存関係ツリーを理解するのに役立つツールにすぎないと確信しています。 おそらく、reactのコピーが1つだけインストールされています。 node_modulesフォルダに移動して確認することができます...

gatsbyを更新した後、同じ問題が発生しました。 以前のバージョン「gatsby」にダウングレードしました：「^ 2.13.73」はいくつかのバージョンに戻っていますが、問題が修正されました。

問題を修正しました！ npmを使用してアンインストールしてから、 react 、 react-dom 、およびgatsby （再）インストールしました。 私はその正確な順序でそれを行いました（順序が重要であるとは思わないが、そうなる場合は参考までに）。

npm ls reactは2つのバージョンを示していますが、それらは同じであり、「重複」としてマークされています。

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

これは私のために働いた。 ありがとう！

問題を修正しました！ npmを使用してアンインストールしてから、 react 、 react-dom 、およびgatsby （再）インストールしました。 私はその正確な順序でそれを行いました（順序が重要であるとは思わないが、そうなる場合は参考までに）。

npm ls reactは2つのバージョンを示していますが、それらは同じであり、「重複」としてマークされています。

[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をアップグレードした後は、必ず「gatsbyclean」を実行してください。

私のためのトリックをした@clarmsoにより示唆されるよう2.18.7へのアップグレードGATSBY（16.12.0である反応）。

これと同じ問題もあります。 reactとgatsbyを更新しましたが、それでも同じ問題があります。 また、更新後にクリーンアップしようとしましたが、問題が解決しません。

"ギャツビー"： "^ 2.18.11"
"react"： "^ 16.12.0"
"react-dom"： "^ 16.12.0"

これと同じ問題もあります。 reactとgatsbyを更新しましたが、それでも同じ問題があります。 また、更新後にクリーンアップしようとしましたが、問題が解決しません。

"ギャツビー"： "^ 2.18.11"
"react"： "^ 16.12.0"
"react-dom"： "^ 16.12.0"

わたしも。 昨日までうまくいきました

問題を修正しました！ npmを使用してアンインストールしてから、 react 、 react-dom 、およびgatsby （再）インストールしました。 私はその正確な順序でそれを行いました（順序が重要であるとは思わないが、そうなる場合は参考までに）。

npm ls reactは2つのバージョンを示していますが、それらは同じであり、「重複」としてマークされています。

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

これは私にもうまくいきました。 これは恒久的な修正のために取り組んでいますか？

これらの更新により、StoreStateProviderの奇妙な警告が表示され、Contentfulのランダムなものが存在していてもnullとして返されます。

何が起こっているのかわかりませんが、今のところこれをブランチに保持する必要があります

これと同じ問題もあります。 reactとgatsbyを更新しましたが、それでも同じ問題があります。 また、更新後にクリーンアップしようとしましたが、問題が解決しません。

"ギャツビー"： "^ 2.18.11"
"react"： "^ 16.12.0"
"react-dom"： "^ 16.12.0"

node_modulesフォルダーとpackage-lock.jsonファイルを削除しました。 npm installを実行し、すべてが再び正常になりました。

私の経験は、上記のコメントの組み合わせでした。 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は2つのバージョンを示していますが、それらは同じであり、「重複」としてマークされています。

[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ロガーが使用されている場合にのみ発生することがわかりました。 使用される特定のロガーは、 GATSBY_LOGGERプロセスenvを介して制御され

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

yurnalist / json gatsbyロガーに切り替えると問題が修正されます

export GATSBY_LOGGER=["yurnalist"]

私は今日、古いプロジェクトでgatsby developを実行しているときにこの問題に遭遇しました（最後にgatsbydevelopを実行したのは秋でした）

上記の（非常に役立つ！）提案を組み合わせて修正しました。

これが機能したことを確認できます：

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を削除しました
npmiを実行しました

私のために働いた：D

問題を修正しました！ npmを使用してアンインストールしてから、 react 、 react-dom 、およびgatsby （再）インストールしました。 私はその正確な順序でそれを行いました（順序が重要であるとは思わないが、そうなる場合は参考までに）。

npm ls reactは2つのバージョンを示していますが、それらは同じであり、「重複」としてマークされています。

[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のバージョンを再度元に戻し、このコマンドを実行しました。 以下の出力のギャツビーバージョンが正しくないことに注意してください。

  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で修正する必要があるものがないため、これを閉じます。

どうもありがとうございました！ 💜

昨日、私は半日を費やして、私の場合、デップに糸を取り付けたときにgatsbyのビルド/開発が正常に機能していることを確認しました。

効果的に、糸を使用することは私にとっても問題を解決しました

npm update実行するだけで、問題は解決しました

gatsby-cliをグローバルにインストールすると（推奨）、私が知る限り、これらの問題を防ぐことができます。 それにもかかわらず、これに関してギャツビーで修正する必要があるものは何もないので、これを閉じます。

これは私にはうまくいきませんでした。 上記のようにロガーをyurnalistまたはjson切り替えました。 public 、 .cache 、およびnode_modulesフォルダーも削除しました。

gatsbyバージョンの出力：

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を削除します
-npmiを実行します

それのための複製ケースを手に入れた後：

これは、ユーザー定義バージョンのreactがnode_modulesにインストールされ、 gatsby-cliバージョンのreactがnode_modules/gatsby/node_modulesインストールされるnpmインストールの場合に発生するようです。

inkはnode_modulesインストールされているように見えるため、その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と同じバージョンのreactをロードします（これはハックが大幅に少なく、Node.jsモジュールの解決の過負荷から生じる潜在的な問題の可能性が低くなります） 。

これに関する唯一の問題は、サードパーティのinkコンポーネントを使用し（ ink-spinnerは現在使用しているコンポーネントのみです）、それらはinkは異なるディレクトリにインストールされる場合です。

gatsby-cli内でink-spinnerをベンダー化し、サードパーティコンポーネントをパッケージとして使用しないようにすることで（およびそれらすべてをベンダー化することで）、これらの潜在的な問題を回避できます。

---編集：
上記に注意する必要があります- inkはnode >= 16.8.0が必要なので、 gatsby-cli react >= 16.8.1以降の機能を使用しないようにする必要があります-より多くの研究が必要ですが、それは有望です

更新： dependenciesとpeerDependencies与えられた場合、 npm node_modules階層を「適切に」解決できないため、 createRequireFromPathルートは機能しません。 peerDependenciesはinkとgatsby-cliによって提供されます。

「クイック」変更は、 reactバージョン要件（https://github.com/gatsbyjs/gatsby/pull/21522）を下げて、この問題が発生するシナリオの量を減らすことです。

しかし、これを完全に修正するわけではありません。 そのために、適切なreactバージョンをgatsby-cliにバンドルして、 npmがnode_modules階層を適切に作成できない（またはNode.jsモジュールの解像度をオーバーライドする）ことを回避する可能性があります。これは予期しない結果をもたらす可能性のあるハッキングであるため、他の解決策がある場合はそれを避けたいと思います）

別の更新（影響を受けるプロジェクトを制限するためにgatsbyにいくつかの更新を行いました）は[email protected]公開されましたが、それでもpackage-lock.jsonをリセット/削除する必要がある場合があります。

それでも問題が解決しない場合は、 react / react-dom package.json固定されていて、バージョンが[email protected]よりも低い可能性があります-まだ修正はありませんが、次のステップとして検討しています。考えられる回避策は、現時点ではnpmではなくyarn使用することです（検証されていません）。

誰かが技術的なものに興味があるなら、私がそれを修正しようとした最初のプルリクエストのコメントをチェックしてください-https microbundle ） reactをgatsby-cliにバンドルして、 node_modulesからreactを使用しようとせず、これを使用します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日が経過しています。
この問題を見逃した場合、または開いたままにしておきたい場合は、ここに返信してください。 この問題を開いたままにするために、「古くない」というラベルを追加することもできます。
わかりやすい注意として、この問題またはその他の修正された問題を確認する最善の方法は、プルリクエストを開くことです。 PRの開始、問題のトリアージ、および貢献の詳細については、 gatsby.dev / contributeを確認してください。

Gatsbyコミュニティに参加していただきありがとうございます。 💪💜

あまり活動はありませんが、古くなっているとは思いません

私はこれと同じ問題を抱えていました。私がしたことは、json.lockを削除し、yarnコマンドを実行して依存関係を更新することでした。 そして、すべてが正常に機能するように戻りました。

「node_modules」フォルダーと「package-lock.json」ファイルを削除してから「npminstall」コマンドを削除することで解決したのと同じ問題が発生しました。

ひや！

この問題は静かになりました。 不気味な静か。 👻

多くの問題が発生しているため、現在、30日間使用されなかった後に問題をクローズしています。 ここでの最後の更新から少なくとも20日が経過しています。
この問題を見逃した場合、または開いたままにしておきたい場合は、ここに返信してください。 この問題を開いたままにするために、「古くない」というラベルを追加することもできます。
わかりやすい注意として、この問題またはその他の修正された問題を確認する最善の方法は、プルリクエストを開くことです。 PRの開始、問題のトリアージ、および貢献の詳細については、 gatsby.dev / contributeを確認してください。

Gatsbyコミュニティに参加していただきありがとうございます。 💪💜

やあまた会ったね！

この問題で何かが起こってから30日が経過したので、私たちのフレンドリーな近所のロボット（それは私です！）がそれを閉じます。
私はロボットにすぎないので、この問題を誤ってクローズした場合、私はHUMAN_EMOTION_SORRYことに注意してください。 他に必要な場合は、この問題を再度開くか、新しい問題を作成してください。
わかりやすい注意として、この問題またはその他の修正された問題を確認する最善の方法は、プルリクエストを開くことです。 PRの開始、問題のトリアージ、および貢献の詳細については、 gatsby.dev / contributeを確認してください。

ギャツビーコミュニティに参加していただき、ありがとうございます。 💪💜

：slightly_frowning_face：デフォルトのロガーとしてまだyurnalistを使用しています。 これが修正されたという更新はここでは見たことがありません。

そもそも存在してはならない問題を探している開発者を必死にするには：

-node_modulesフォルダーを削除します
-package.lock.jsonを削除します
-npmiを実行します

これは私のために働いた...

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ファイルを削除することは、プラグインまたは依存関係が追加されるたびに重大な変更が発生することに対する非現実的な解決策です。

私の場合の根本的な問題は、 yarnがインストールされて利用可能な場合、 gatsby new [path] [starter]を使用してプロビジョニングされた新しいプロジェクトが暗黙的に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を解決するためにカスタムwebpack構成を使用して解決：

`` `` js
//ファイル：gatsby-node.js
const path = require（ 'path'）

module.exports = {
onCreateWebpackConfig：（{アクション}）=> {
actions.setWebpackConfig（{
解決：{
エイリアス：{
'react'：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" } }

これですべてがスムーズに実行されます。