React.js npm start エラー対策

React.jsでnpm start実行後のエラー「sh: react-scripts: command not found」について

問題
React.jsプロジェクトでnpm startコマンドを実行した際に、以下のエラーメッセージが表示されることがあります。

sh: react-scripts: command not found

これは、react-scriptsコマンドがシステムパスに登録されていないことを示しています。

原因

• システムパスに登録されていない
  react-scriptsがインストールされていても、システムパスの環境変数に登録されていないと、コマンドとして認識されません。
• react-scriptsがインストールされていない
  react-scriptsは、Create React Appプロジェクトの依存関係として自動的にインストールされます。もし、プロジェクトの初期化が正しく行われていない場合、react-scriptsがインストールされていない可能性があります。

解決方法

1. react-scriptsのインストール確認
   

   • プロジェクトのディレクトリに移動します。
   • npm listコマンドを実行して、react-scriptsがインストールされていることを確認します。

2. react-scriptsのパス登録
   

   • node_modules/.binディレクトリは、通常、react-scriptsコマンドがインストールされる場所です。このディレクトリをシステムパスの環境変数に登録することで、コマンドとして認識できるようになります。

   macOS/Linux
   

   • ターミナルで以下のコマンドを実行します。

     export PATH=$PATH:$(pwd)/node_modules/.bin
     

   • この変更を永続的に適用するには、.bashrcまたは.zshrcファイルに上記の行を追加します。

   Windows
   

   • コマンドプロンプトまたはPowerShellで以下のコマンドを実行します。

     set PATH=%PATH%;%cd%\node_modules\.bin
     

   • この変更を永続的に適用するには、システム環境変数を編集します。

3. npm startの再実行
   

• システムパスの設定は、オペレーティングシステムによって異なる場合があります。
• npm startコマンドは、開発サーバーを起動するためのスクリプトを呼び出します。
• Create React Appプロジェクトでは、react-scriptsコマンドはプロジェクトの依存関係として自動的にインストールされます。

エラー発生例

sh: react-scripts: command not found

このエラーは、React.jsプロジェクトでnpm startコマンドを実行した際に、react-scriptsコマンドがシステムパスに登録されていない場合に発生します。

対策例

npm list

• Windows
  

  set PATH=%PATH%;%cd%\node_modules\.bin
  

• macOS/Linux
  

  export PATH=$PATH:$(pwd)/node_modules/.bin
  

npm start

具体的な例

# プロジェクトのディレクトリに移動
cd my-react-app

# `react-scripts`のインストール確認
npm list

# `react-scripts`のパス登録（macOS/Linux）
export PATH=$PATH:$(pwd)/node_modules/.bin

# `npm start`の再実行
npm start

注意事項

• react-scriptsは、Create React Appプロジェクトの依存関係として自動的にインストールされます。

プロジェクトのディレクトリから直接実行:

• node_modules/.binディレクトリは、通常、react-scriptsコマンドがインストールされる場所です。このディレクトリに移動して、react-scriptsコマンドを直接実行することができます。

cd node_modules/.bin
./react-scripts start

npm scriptを使用:

• package.jsonファイルのscriptsセクションにstartスクリプトを定義し、それを実行することもできます。

{
  "scripts": {
    "start": "react-scripts start"
  }
}

そして、npm startコマンドを実行します。

npxを使用:

• npxコマンドは、ローカルにインストールされたパッケージを実行するためのツールです。これを使用して、react-scriptsコマンドを実行することもできます。

npx react-scripts start

• 最も一般的な方法は、npm startコマンドを使用することですが、他の方法も状況に応じて使用することができます。

例

# プロジェクトのディレクトリに移動
cd my-react-app

# 代替方法1: プロジェクトのディレクトリから直接実行
cd node_modules/.bin
./react-scripts start

# 代替方法2: npm scriptを使用
npm start

# 代替方法3: npxを使用
npx react-scripts start