npx create-react-appが失敗するようになったら

発生したエラー

通常、Reactのプロジェクトを作る際はcreate-react-appコマンドを使うかと思います。 以下のような感じです。

npx create-react-app sample-app

ひと昔前はnpmやyarnのグローバルにcreate-react-appを入れていましたが、この手のコマンドは最近ではnpxで使うのがベターです。

しかしながら上記のようなコマンドを流した際に、以下のエラーが発生して、プロジェクトを作ることができなくなっていました。

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

どうやらcreate-react-appがv5になったらしい

エラーにある通り、いつの間にかcreate-react-appのバージョンがv5となったらしく、自分の手元のバージョン(ここでは4.0.3)は使えなくなったようです。

対処法としてグローバルにインストールされているであろうcreate-react-appをnpm uninstall -g create-react-appやyarn global remove create-react-appで削除してくれ、とのメッセージが表示されています。

しかしながら自分の手元ではグローバルインストールしておらず、npxを使っているはずなのに・・・ 一応当該のコマンドは流しましたが、状況は改善しませんでした。

キャッシュも削除しないとダメだった

自分の手元であれこれ試行錯誤+Google検索で似たような事例を調べた結果、どうやらnpxのバグのため、キャッシュを削除しないといけないようです。

そのため、キャッシュ削除用のモジュールであるclear-npx-cacheを実行します。

参考：npm - clear-npx-cache

実行コマンドは以下の通りです。

npx clear-npx-cache

これで冒頭で紹介したエラーが発生しなくなり、正常のプロジェクトを作成できるようになりました。

まとめ

ここ最近はReactで真っ新なプロジェクトを作る機会も減ったため、ちょっとだけ戸惑いましたが解決してみればなんてことない内容でした。

とはいえプロジェクト作って新しいライブラリを使ってみるぞ、というモチベーションが出鼻を挫かれる感じになるので、こういうところでは極力ハマりたくはないですよね。 同様の事例にハマった方の解決に役立てれば幸いです。

SNSでシェアする

タグ

• react