How do I resolve <StoreStateProvider> error in Gatsby?

Question

I cloned a gatsby application and when running the development server:

$ gatsby develop

I received a 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




  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

Update: It seems that upgrading Gatsby to 2.23.11 may have resolved this, however I haven't tested myself. comment

Oct 2020: Issue still persists in 2.24.66

---

This seems to be an ongoing issue [as of May 2020]

The issue comes down to a mismatch of React and the underlying gatsby version that may have been previously installed in the application.

Having a React version lower than 16.8.0 seems to cause this issue, while [email protected] tries to limit the effect on this - it does appear it hasn't been fully merged as a PR - source

A simple method is to

1. remove the node_modules directory
2. remove package-lock.json
3. npm i

An alternative could be to use npm update, but the comments in that issue has had results