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

React.js

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

発生したエラー

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

Nodeのバージョンが低いことによりエラーが発生(React)

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

スポンサーリンク

解決法

Nodeのバージョンアップ

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

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

Node.js_公式ページ

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

Node_インストーラパッケージをクリック

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

Node_インストーラパッケージ_1ページ目

 「続ける」をクリック

Node_インストーラパッケージ_2ページ目

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

Node_インストーラパッケージ_3ページ目

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

Node_インストーラパッケージ_インストール完了

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

スポンサーリンク

Node:バージョン確認

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

node -v

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

インストール後にNodeのバージョンが更新されているか確認

アプリを作成してみる

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

create-react-app アプリ名

 

React_新規アプリ作成_コマンド_リトライ

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

React_新規アプリ作成_リトライ_リザルト

まとめ

今回は、React.jsにて、create-react-appコマンドを用いて、新規のアプリを作成しようとした際に発生したエラーの解消法について、ご紹介させて頂きました。今回と似たようなエラーの場合は、まず、Nodeのバージョンを疑い、バージョンの更新をしてみてみることから取り組んでみてください。

最後まで読んで頂き、有難う御座いました。

コメント

タイトルとURLをコピーしました