【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習得に躓いているならぜひお試しください。

【教育・学習】資格・学習
総合情報サイト「コレダ!」がお届けする教育・学習における資格・学習の総合情報サイトです。
【教育・学習】資格・学習
総合情報サイト「コレダ!」がお届けする教育・学習における資格・学習の総合情報サイトです。

コメント