【npmエラー】Failed to load parser ‘babel-eslint’ declared in ‘package.json »

こんにちは、フロントエンドエンジニアのてりーです。

長らく放置していたリポジトリでnpm run buildしたらビルドエラーが出た。nodeの依存関係が原因だったが、解決までの過程を残しておく

背景

https://github.com/gunners6518/Netflix-clone

このリポジトリを長らく放置していたら、typoの報告が来ていた。
修正しようとしたら、npm run buildでコケた。

エラー内容

エラーログ

Failed to load parser 'babel-eslint' declared in 'package.json » eslint-config-react-app » /home/Netflix-clone/node_modules/eslint-config-react-app/base.js': Cannot find module 'babel-eslint'

内容としてはbabel-eslintが見つからないと言っている。

https://stackoverflow.com/questions/59021924/error-failed-to-load-parser-babel-eslint-declared-in-eslintrc-cannot-find

このサイトを参考にyarn add eslint –save-devでeslintを追加する。

ちなみに

  • --save-devdevDependenciesにインストールする
  • --savedependenciesにインストール
  • オプション無しでpackage.jsonに記載がある全てのパッケージをインストール

dependenciesは本番環境でも使うパッケージ、devDependenciesは開発用のパッケージを指定する場所。
開発用のパッケージとしてはeslintjestなどを指定することが多い。
なので今回もyarn add eslint –save-devを使った。

再度npm run buildチャレンジ!

エラー!!

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/fujisawakazuki/Desktop/sample/Netflix-clone/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.

es-lintの依存関係が悪いらしい。
手順を要約すると

  1. package-lock.json and/or yarn.lockを削除する
  2. node_modulesを削除する
  3. package.jsondevDependencies and/or dependenciesからeslintを削除する
  4. yarn実行

再度npm run buildチャレンジ!

上手く行った。

まとめ

babel-eslintの依存関係が原因。
手動で修正するのは難しいので、関連フォルダを一回削除して、再度インストールする事で解決した。