npm start で babel-loader 8 のエラーが表示されて、丸１日ぐらい対応に時間を費やしたので、エラー内容と解決策をメモします。
【目 次】
React を勉強するために写経ができるサンプルを探して
React を勉強するために、オンライン学習サイト（ Udemy
）と、サンプルの写経（書き写す）を繰り返しています。
Reactを写経するためのサンプルとしては、Example Projects を見つけたので、このサンプルを活用して勉強することにしました。
電卓のサンプル（ calculator ）を使うことにしたのですが、写経をする前に成果物を確認しておきたいです。そのために、clone して、npm install 、npm start を実施したのですが、エラーのために電卓アプリが起動しませんでした。
npm start babel-loader エラーの内容
Error Message
calculator $ npm start
> calculator@0.1.0 start /Users/yoshiiikoba/Documents/react_study/calculator
> react-scripts start
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.
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.0.6"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
/Users/yoshiiikoba/node_modules/babel-loader (version: 7.1.1)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
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 "babel-loader" 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/yoshiiikoba/node_modules/babel-loader is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-loader in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-loader.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! calculator@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the calculator@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
エラーメッセージ 日本語訳
calculator $ npm start
> calculator@0.1.0 start /Users/yoshiiikoba/Documents/react_study/calculator
> react-scripts start
プロジェクトの依存関係ツリーに問題がある可能性があります。
Create React Appのバグではない可能性がありますが、ローカルで修正する必要があるものです。
Create React Appが提供するreact-scriptsパッケージには、依存関係が必要です。
"babel-loader": "8.0.6"
手動でインストールしないでください。パッケージマネージャーが自動的にインストールします。
ただし、ツリーの上位で別のバージョンのbabel-loaderが検出されました。
/Users/yoshiiikoba/node_modules/babel-loader (version: 7.1.1)
互換性のないバージョンを手動でインストールすると、デバッグが困難な問題が発生することがわかっています。
このチェックを無視したい場合は、SKIP_PREFLIGHT_CHECK = trueをプロジェクトの.envファイルに追加してください。
これによりこのメッセージは永久に無効になりますが、他の問題が発生する可能性があります。
依存関係ツリーを修正するには、次の手順を正確な順序で実行してください。
1. プロジェクトフォルダーのpackage-lock.json（package.jsonではない！）またはyarn.lockを削除します。
2. プロジェクトフォルダーのnode_modulesを削除します。
3. プロジェクトフォルダーのnode_modulesを削除します。プロジェクトフォルダーのpackage.jsonファイルの依存関係やdevDependenciesから「babel-loader」を削除します。
4. 使用するパッケージマネージャーに応じて、npm installまたはyarnを実行します。
ほとんどの場合、これで問題を修正できます。
これが役に立たない場合、他に試すことができるいくつかのことがあります：
5. npmを使用した場合は、yarn（http://yarnpkg.com/）をインストールし、代わりに上記の手順を繰り返します。
npmにはパッケージの巻き上げに関する既知の問題があり、将来のバージョンで解決される可能性があるため、これが役立つ場合があります。
6. / Users / yoshiiikoba / node_modules / babel-loaderがプロジェクトディレクトリ外にあるかどうかを確認します。
たとえば、誤ってホームフォルダーに何かをインストールした可能性があります。
7. プロジェクトフォルダーでnpm ls babel-loaderを実行してみてください。
これにより、他のどのパッケージ（反応するスクリプト以外）がbabel-loaderをインストールしたかがわかります。
他に何も役に立たない場合は、SKIP_PREFLIGHT_CHECK = trueをプロジェクトの.envファイルに追加します。
とにかく続行する場合は、このプリフライトチェックを永久に無効にします。
追伸 このメッセージは長いことは承知していますが、上記の手順をお読みください:-)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! calculator@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the calculator@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm start babel-loader エラーの解決
エラーの原因は、babel-loader が global とローカルプロジェクトの２つに存在し、global のバージョンが異なることでした。
/Users/yoshiiikoba/node_modules/babel-loader (version: 7.1.1)
今回のプロジェクトの上位にある、上記の babel-loader が問題なので、この node_modules ディレクトリをごっそり削除します。
そして、電卓アプリ（calculator）のプロジェクトに戻って、 npm start することで、無事にサンプルの電卓アプリが起動しました。
Reactの勉強は、オンライン学習と写経の繰り返し学習が最適
オンライン学習は Udemy を活用して学びながら、サンプルで写経する、を繰り返すことで、より理解が深まります。
Udemy での、おすすめの React 講座は次の記事で詳しく書いています。
また、React の需要やフリーランスの案件獲得についても、次の記事で書いています。
あわせて読みたい
最後まで、読んで頂きありがとうございます。
質問はTwitterから受け付けますので、お気軽にどうぞ。
よっしー｜Twitter
