如何解决 Gatsby 中的 <StoreStateProvider> 错误？

Question

我克隆了一个 gatsby 应用程序，并在运行开发服务器时：

$ gatsby develop

我收到一个错误：

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




  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for o  ne 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 react-invalid-hook-call for tips about how to debug and fix this problem.

  - react.development.js:1465 resolveDispatcher
    [New-webelight-gatsby]/[gatsby]/[gatsby-cli]/[react]/cjs/react.development.js:1465:13

  - react.development.js:1496 useState
    [New-webelight-gatsby]/[gatsby]/[gatsby-cli]/[react]/cjs/react.development.js:1496:20

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

  - react-reconciler.development.js:6036 renderWithHooks
    [New-webelight-gatsby]/[react-reconciler]/cjs/react-reconciler.development.js:6036:18

  - react-reconciler.development.js:8570 mountIndeterminateComponent
    [New-webelight-gatsby]/[react-reconciler]/cjs/react-reconciler.development.js:8570:13

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

  - react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl
    [New-webelight-gatsby]/[react-reconciler]/cjs/react-reconciler.development.js:11563:10

  - react-reconciler.development.js:11740 invokeGuardedCallback
    [New-webelight-gatsby]/[react-reconciler]/cjs/react-reconciler.development.js:11740:31

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

  - react-reconciler.development.js:14696 performUnitOfWork
    [New-webelight-gatsby]/[react-reconciler]/cjs/react-reconciler.development.js:14696:12


E:\Webelight\New-webelight-gatsby>

Answer 1

更新：似乎升级 Gatsby2.23.11可能已经解决了这个问题，但是我还没有测试过自己。评论

2020 年 10 月：问题仍然存在2.24.66

这似乎是一个持续存在的问题[截至 2020 年 5 月]

问题归结为应用程序中先前安装React的基础gatsby版本与基础版本不匹配。

React 版本低于16.8.0似乎会导致此问题，同时gatsby@2.19.18试图限制对此的影响 - 它似乎没有完全合并为 PR -来源

一个简单的方法是

1. 删除node_modules目录
2. 消除 package-lock.json
3. npm i

另一种方法是使用npm update，但该问题中的评论已经产生了结果