はじめに

なんだかんだでReactチュートリアルをやったことがなかったのでやってみようと思ったのですが、npm startでエラーが出ちゃいました。ちなみにオンラインエディタではなくVSCodeを使っています。

環境

-Mac OS Catalina 10.15
-VSCode
-node 12.4.0

1.とりあえずエラーを見てみる

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

Create React Appのバグじゃなさそうだよー、でもローカルで直さんとあかんやつやーって感じですね。

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "^6.1.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

という感じでどうやら上位ディレクトリのeslintのバージョンが違うのが原因ぽい。丁寧に解決法も教えてくれてるのでとりあえずそのとおりにやってみる。

2.node moduleの再インストール

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/username/node_modules/eslint is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls eslint in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed eslint.

とりあえず上記のとおりにやってみます。

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.

プロジェクトフォルダからpackage-lock.jsonを削除します。

2. Delete node_modules in your project folder.

node_moduleをプロジェクトフォルダから削除します。

3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.

package.jsonからeslintを削除します。

4. Run npm install or yarn, depending on the package manager you use

npm installを実行します。

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.This may help because npm has known issues with package hoisting which may get resolved in future versions.

ここでまさかのnpmを使用した人はyarnを使ってもう1回4の手順をやるらしいです。何やらnpmにはパッケージの巻き上げに関する問題があるとか。それなら最初からyarnを指定してくれ...

とりあえず指示に従い、yarn installを実行します。yarnが入っていない人は先にyarnをインストールしておいてください。

6. Check if /Users/username/node_modules/eslint is outside your project directory.For example, you might have accidentally installed something in your home folder.

eslintがプロジェクトディレクトリ外にあるか確認をします。確認方法は7番のとおりにやればできます。

7. Try running npm ls eslint in your project folder.This will tell you which other package (apart from the expected react-scripts) installed eslint.

プロジェクトフォルダ内でnpm ls eslintを実行します。これによりeslintがインストールされている他のパッケージがわかります。

my-app@0.1.0 /Users/username/Documents/my-app
└─┬ UNMET DEPENDENCY react-scripts@3.2.0
  └── UNMET DEPENDENCY eslint@6.7.1

依存関係がないと怒られました。
npm install react --save
を実行します。
そうすると、、、

my-app@0.1.0 /Users/username/Documents/my-app
└─┬ react-scripts@3.2.0
  └── eslint@6.7.1

無事に解決！

3.npm install

ここまでできたらnpm installを実行します!
すると、、、

またエラーが出た！！！！！！！！！

エラーの内容は前回と一緒です。どうやらホームディレクトリのeslintのバージョンが怪しそう。調べたところeslintはグローバルインストール非推奨のようです。個別のプロジェクトごとにインストールするように。

ホームディレクトリのnode_modulesに移動し、rm -rf eslintを実行します。その後reactチュートリアルのディレクトリまで移動しnpm installを実行すると、、、

http://localhost:3000/が起動して画面が表示された！！！！！！！！！

まとめ

ここまで長かったですが、なんとか解決しチュートリアルが始められそうです。eslintはグローバルでインストールしないよう注意しましょう。また、エラーは英語だからと初学者は何かと避けがちですが、解決の糸口になる可能性が高いので頑張って読んでみましょう！