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

Question

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

第一次当我 gatsby 新教程-第三部分 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 启动开发服务器时，我遇到了这些 fatal 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.

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 排版