Как устранить ошибку <StoreStateProvider>в Gatsby?

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

Похоже, это постоянная проблема [по состоянию на май 2020 года]

Проблема сводится к несоответствию React и базовой версии gatsby, которая могла быть ранее установленный в приложении.

Наличие версии React ниже, чем 16.8.0, похоже, вызывает эту проблему, а gatsby@2.19.18 пытается ограничить влияние на это - похоже, что он не был полностью объединен, поскольку PR - источник

Простой метод - это

1. удалить каталог node_modules
2. удалить package-lock.json
3. npm i

в качестве альтернативы можно использовать npm update, но комментарии в этом выпуске дали результаты