Why do I run into these errors when running my Gatsby development server?

Question

I'm completing Gatsby's part three tutorial from their official website and running into a problem.

First when I gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world

I get those errors in terminal:

warning "gatsby > [email protected]" has unmet peer dependency "@types/react@^15.0.0 || ^16.0.0".
warning "gatsby > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".

However I can still get running the website in localhost:8000. The real problem arises when I follow the tutorial and install the Typography plugin using this command :

npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates

Here are the errors I get :

npm WARN [email protected] requires a peer of react@^16.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/[email protected] requires a peer of [email protected] || 16.x || 16.4.0-alpha.0911da3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^16.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@>=16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^16.8.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.

Then when I try to start the development server using gatsby develop I get these fatal errors:

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.

  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.

I would really appreciate some help making sense of this ! Sorry if my question is not well formulated, this is my first time using Stack Overflow.

edit: package.json

{
  "name": "gatsby-starter-hello-world",
  "private": true,
  "description": "A simplified bare-bones starter for Gatsby",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "dependencies": {
    "gatsby": "^2.18.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "prettier": "^1.19.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Answer 1

For anyone having that problem, found the answer here.

The solution is to replace the command npm install --save gatsby-plugin-typography react-typography typography to the yarn equivalent yarn add gatsby-plugin-typography react-typography typography

Answer 2

From this issue, it seems like you can simply clean out your existing node_modules and reinstall.

$ rm -rf node_modules package-lock.json
$ npm install