【Mac】Reactの新規アプリ作成時に発生したnpmエラーへの対処方法

① nodeの現在のパスを確認

which node

ここで表示されるパスを次のコマンドで使用します。

② Node.jsの実行ファイルを削除

rm -rf /usr/local/bin/node

パスは、whichコマンドで表示されたものを入力しましょう。特に何も反応はないですが、Nodeのバージョンを確認して、表示されなければ成功です。

③ Node.jsのバージョンを確認

node -v

コマンドが見つからないと表示されているため、無事に実行ファイルの削除が成功してることが分かります。

① nodebrewをインストール

curl -L git.io/nodebrew | perl - setup

黄色で囲っている箇所を環境変数を設定する上で使用するコマンドになります。

② 環境変数の設定

export PATH=$HOME/.nodebrew/current/bin:$PATH

特に何も変化などはないですが、実行することで環境変数の設定がされます。

① nodebrewを使用し、Node.jsをインストールする

Installed successfullyと表示されれば、インストール完了。

nodebrew install-binary v(インストールするバージョン)

②  インストールしたバージョンのリストを表示

今回は、最新版をインストールしましたので、v18.10.0が表示されています。(※ 2022/10/11時点での最新バージョンです。)

③ 実際に使用したいバージョンを先程、確認したリストの中から選ぶ & 各種バージョンの確認

nodebrew use v(使用するバージョン) 
⇨ 使用するバージョンを設定する

node -v
⇨ Node.jsのバージョンを確認

npm -v
⇨ npmのバージョンを確認

① React : 新規アプリ作成に関するコマンドを実行

npx create-react-app アプリ名

エラーもなく正常にReactの新規アプリを作成することが出来てますので、完璧です。最終的に「Happy hacking!!」と表示されていればOKですが、表示されない場合は、これまでの手順を見直してみましょう。

② アプリを起動させてみる

cd アプリ名 
npm start

ターミナル上には、以下のように表示されればOK

ブラウザ上では、次のように表示されていることを確認しましょう。

ここまで確認できたら、作業は終了になります。結論、バージョンは適度に確認するのが一番ですね。