web-dev-qa-db-ja.com

Gatsby開発サーバーを実行しているときにこれらのエラーが発生するのはなぜですか？

私はギャツビーのパート3チュートリアル 公式Webサイトから を完了し、問題が発生しています。

最初に私が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でWebサイトを実行できます。チュートリアルに従って、次のコマンドを使用してタイポグラフィプラグインをインストールすると、実際の問題が発生します。

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.

私はこれを理解する助けを本当にいただければ幸いです！私の質問がうまく定式化されていない場合は申し訳ありませんが、スタックオーバーフローを使用するのは初めてです。

編集：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"
  }
}
javascriptreactjsnpmgatsby
6
Andréa

この問題 から、単に既存のnode_modulesを削除して再インストールできるようです。

$ rm -rf node_modules package-lock.json
$ npm install
1
Brady Dowling