gatsbyのチュートリアル3ができない

はじめに

gatsbyに入門しようとチュートリアルを進めていたら予想外のところでエラーがでたのでその現象と解決策を共有します.

現象

gatsbyのチュートリアルPART3をやっていました.
いろいろjsを書き, チュートリアル通りに

gatsby develop

とするとreactがないと怒られました. あれ? なんで? と思いながらもnpm install すれば治るでしょと

npm install
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 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 https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

...

となりました…
チュートリアル通りやったのになんでだー!

道のり

軽く調べて同じような方がいたので
対処法としてnode_modulesを削除してnpm installすれば治るらしいのでやってみたんですが治りませんでした…

解決方法

yarnでやるのがいいそうです.

install gatsby-transformer-remark breaks 'gatsby develop' · Issue #19064 · gatsbyjs/gatsby

When I install gatsby-transformer-remark it breaks the development environment for that site. Tried this 3 times from a fresh install using npm. 1 - Install new...

github.com

rm  package-lock.json
yarn install
gatsby develop

おわりに

これからgatsby頑張るぞー

参考文献

install gatsby-transformer-remark breaks 'gatsby develop' · Issue #19064 · gatsbyjs/gatsby

When I install gatsby-transformer-remark it breaks the development environment for that site. Tried this 3 times from a fresh install using npm. 1 - Install new...

github.com

docs(tutorial): tutorial/part-three -> walkthrough failing if yarn is selected as packageManager · Issue #21990 · gatsbyjs/gatsby

Summary when the packageManager in ~/.config/gatsby/config.json set to yarn then the walkthrough failing (see related issues) Basic example Possible changes and...

github.com