React.js : create-react-appでアプリを作成することが出来ない場合の解決法

どうも、ウツボウです♪
本記事では、React.jsにて、create-react-appコマンドを用いて、新規のアプリを作成しようとした際に発生したエラーの解消法について、何故エラーが発生したのかも含めてご紹介させて頂いております。 私がこれまでに対応してきた質問の中では、特に、少し古い記事などを参考に特定のバージョンでReactの環境を作った方が遭遇しやすいエラーになるかと思います。

発生したエラー

まず、発生したエラーですが、以下の赤枠の部分になっております。
背景としましては、普段使用していない別のPCにてReact.jsの新規アプリを作成をしようと試みたところアプリ作成が失敗したという感じになります。

エラー内容を見てみると、現時点でのNodeのバージョンには、対応していないものがあるそうですので、バージョンをアップデートしてあげることで、解決出来ると考えることが出来ます。

解決法

Nodeのバージョンアップ

先程、少し触れましたが、今回のエラーを解決するためには、Nodeのアップデートをしてあげる必要があります。
今回は、Node.jsの公式ページよりインストーラパッケージをダウンロードし、PC内にインストールを行うことで、バージョンの更新をしていく方法をご紹介します。まずは、こちらからNode.jsの公式サイトへ移動しましょう。

サイトへアクセスできたら、赤枠の推奨版(※ 記載されてるバージョンが今回と違くてもOKです。)をクリックしましょう。　するとダウンロードが始まるかと思いますので、
デスクトップなどに保存してください。

ダウンロードが完了したら、インストーラパッケージをクリックしましょう。

インストーラパッケージを起動しましたら、次の手順で作業を進めていきましょう。
① 「続ける」をクリック

② 「続ける」をクリック

③ 「インストール」をクリック

④ インストール完了画面が表示されれば終了です。 ここでは、何処にインストールされるのかも書いてありますので、予備にメモしておきましょう。

最後に、閉じるボタンをクリックしましょう。

Node:バージョン確認

Macの方は、ターミナル(Windowsの方は、コマンドプロンプト)を開き、以下のコマンドでNodeのバージョンを確認してみましょう。
※ 私の場合、元のバージョンは、14.15.4になります。

node -v

インストールしたバージョンが表示されていればOKです。
※ React_projectフォルダは、私が管理しやすいように作ったフォルダですので、皆さんの環境上には作成しなくてOKです。

アプリを作成してみる

Nodeのバージョンが更新されていることが分かりましたら、最後にエラーを表示させることなく、Reactのアプリの作成ができるかをcreate-react-appコマンドで確認してみましょう。

create-react-app アプリ名

以下のように正常にアプリ作成が出来ているため、エラーが解消できたことが分かります。

まとめ