Laravel npm run devでエラーが発生した話

目的

• npmを用いて必要パッケージを取得後に$ npm run devを実行したらエラーが発生した話をまとめる

実施環境

• ハードウェア環境

項目	情報
OS	macOS Catalina(10.15.5)
ハードウェア	MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)
プロセッサ	2 GHz クアッドコアIntel Core i5
メモリ	32 GB 3733 MHz LPDDR4
グラフィックス	Intel Iris Plus Graphics 1536 MB

• ソフトウェア環境

項目	情報	備考
PHP バージョン	7.4.3	Homwbrewを用いて導入
Laravel バージョン	7.0.8	commposerを用いてこちらの方法で導入→Mac Laravelの環境構築を行う
MySQLバージョン	8.0.19 for osx10.13 on x86_64	Homwbrewを用いてこちらの方法で導入→Mac HomebrewでMySQLをインストールする
Node.jsバージョン	14.6.0	こちらの方法で導入した→AWS EC2 AmazonLinux2 Node.jsをインストールしてnpmコマンドを使用できる様にする
npmバージョン	6.14.6	こちらの方法で導入した→AWS EC2 AmazonLinux2 Node.jsをインストールしてnpmコマンドを使用できる様にする

エラーの原因

• $ npm installを実行し忘れていた。

問題までの経緯

1. 下記で紹介されている内容を実施したくてLaravelアプリを新規作成した。

   • https://blog.capilano-fw.com/?p=3998

2. アプリ名ディレクトリに移動後、下記コマンドを実行してパッケージインストールを行った。

   $ npm install simple-peer --save-dev
   $ npm install pusher-js --save-dev
   

3. アプリ名ディレクトリで下記コマンドを実行してのbootstrap.jsを開く。

   $ vi resources/js/bootstrap.js
   

4. 下記の内容を追記する。

   resources/js/bootstrap.js

   window.Peer = require('simple-peer');
   window.Pusher = require('pusher-js');
   

5. アプリ名ディレクトリで下記コマンドを実行してapp.jsを開く。

   $ resources/js/app.js
   

6. 下記の記載をコメントアウトした。

   1. 修正前

      resources/js/app.js

      const app = new Vue({
        el: '#app'
      });
      

   2. 修正後

      resources/js/app.js

      //const app = new Vue({
      //  el: '#app'
      //});
      

7. アプリ名ディレクトリで下記コマンドを実行してビルドを試みた。

   $ npm run dev
   

問題

1. 下記のエラーが発生した。

   > @ dev /var/www/html/pusher_video
   > npm run development
   
   
   > @ development /var/www/html/pusher_video
   > cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
   
   sh: cross-env: command not found
   npm ERR! code ELIFECYCLE
   npm ERR! syscall spawn
   npm ERR! file sh
   npm ERR! errno ENOENT
   npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
   npm ERR! spawn ENOENT
   npm ERR! 
   npm ERR! Failed at the @ development script.
   npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
   
   npm ERR! A complete log of this run can be found in:
   npm ERR!     /home/ec2-user/.npm/_logs/2020-08-04T03_20_02_697Z-debug.log
   npm ERR! code ELIFECYCLE
   npm ERR! errno 1
   npm ERR! @ dev: `npm run development`
   npm ERR! Exit status 1
   npm ERR! 
   npm ERR! Failed at the @ dev script.
   npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
   
   npm ERR! A complete log of this run can be found in:
   npm ERR!     /home/ec2-user/.npm/_logs/2020-08-04T03_20_02_713Z-debug.log
   

問題解決までの経緯

1. $ npm installを実行していなかったことに気が付き実行した。
2. 再度$ npm run devを実行したところエラーは発生せず問題は解決した。