为什么运行我的Gatsby开发服务器时会遇到这些错误？

Question

我正在完成Gatsby的第三部分教程from their official website，并遇到了问题。

首先当我gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world

我在终端中收到这些错误：

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".

但是我仍然可以在localhost：8000上运行网站。当我按照本教程并使用以下命令安装Typography插件时，就会出现真正的问题：

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

这里是我得到的错误：

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.

然后，当我尝试使用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.

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.

我真的很感谢能帮助您理解这一点！抱歉，如果我的问题表达得不好，这是我第一次使用Stack Overflow。

编辑：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

对于有此问题的任何人，找到答案here。

解决方案是将命令npm install --save gatsby-plugin-typography react-typography typography替换为等效的yarn yarn add gatsby-plugin-typography react-typography typography