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

Question

我正在从他们的官方网站上完成 Gatsby 的第三部分教程，但遇到了一个问题。

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

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

warning "gatsby > react-hot-loader@4.12.18" has unmet peer dependency "@types/react@^15.0.0 || ^16.0.0".
warning "gatsby > @typescript-eslint/eslint-plugin > tsutils@3.17.1" 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 gatsby@2.18.4 requires a peer of react@^16.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN react-dom@16.12.0 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/router@1.2.1 requires a peer of react@15.x || 16.x || 16.4.0-alpha.0911da3 but none is installed. You must install peer dependencies yourself.
npm WARN gatsby-link@2.2.25 requires a peer of react@^16.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN gatsby-react-router-scroll@2.1.17 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 react-hot-loader@4.12.18 requires a peer of react@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN create-react-context@0.2.3 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 tsutils@3.17.1 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 ink@2.6.0 requires a peer of react@>=16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN ink-spinner@3.0.1 requires a peer of react@^16.8.2 but none is installed. You must install peer dependencies yourself.
npm WARN react-reconciler@0.24.0 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

对于遇到这个问题的人，可以在这里找到答案。

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