【React】バージョン更新!5.0.0

create-react-appをしたら以下のメッセージが出たので、解決法をまとめました。

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

Reactがバージョン更新されたようです。

そのためバージョン更新を反映する2つの方法をご紹介します。

バージョンを指定してcreateする方法と、旧バージョンのキャッシュを削除して、最新バージョンで作成されるようにする方法の2つです。

解決法1: バージョンを5.0.0で指定してcreate

$ npx create-react-app@5.0.0 my-app

これは簡単ですね。

解決法2: 旧バージョンのキャッシュを削除して、最新バージョンで作成されるようにする

失敗した方法

メッセージの通りglobalのuninstallをします。

$ npm uninstall -g create-react-app

しかし、unintallしたのみでは、旧バージョンのキャッシュが残っており、create-react-appしても旧バージョンで作成されてしまいます。

そこで、インストール済でcasheに残っているものを削除する必要があります。

その前に現在のcacheフォルダの内容を確認してくれる、以下を実行し、cacheのindexと全てのcacheの整合性の確認をする処理をします。

$ npm cache verify

Cache verified and compressed (~/.npm/_cacache)
Content verified: 5459 (190197237 bytes)
Content garbage-collected: 1375 (84909727 bytes)
Index entries: 5591
Finished in 16.629s

それでは消しましょう。

$ npm cache clean --force

npm WARN using --force Recommended protections disabled.

できない。。できませんでした。

npm が最新出ないのが原因かもしれません。

最新のnpm をinstallします。

$ npm install -g npm@latest

removed 52 packages, changed 38 packages, and audited 215 packages in 2s

10 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

その上でcacheのclear再チャレンジ!ダメでした。

この方法はやめて、別の方法でclearしましょう!

成功した方法

PCはmacの場合です。

以下のコマンドを実行し、ディレクトリの中身を削除します。

$ rm -rf ~/.npm/_npx

これでcacheのclearができましたので、めでたくcreate-appできるようになりました!

$ npx create-react-app my-app

解決法1の方法は、毎回versionを指定しないといけないので、暫定処置に過ぎませんが、解決法2の方法であれば、version指定なく、最新のversionでアプリを立ち上げてくれます。

今後もバージョンアップがある度に対応が必要になってくるので、是非こちらの記事をご活用ください!

以上、お読みいただきありがとうございました。

これからReactを始めるなら、私自身がReact習得に苦戦した経験から、圧倒的におすすめなのがこちらのUdemy講座です。

もしReact習得に躓いているならぜひお試しください。

モダンJavaScriptの基礎から始める挫折しないためのReact入門
Reactの習得に苦戦する理由は「JavaScript」への理解不足です。このコースではスムーズにReact開発のスタート地点に立てるように、モダンJavaScriptの動作の仕組みや概念、機能から解説します。
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
「React何となく分かったけど次どうしたら良いか分からない」という人がステップアップするために知っておくべきことを順序立ててハンズオン形式で詰め込みました。本コースを終える頃にはもっとReactのことを好きになっていると思います。

コメント