【npmコマンド】npm install && npm run dev を実行した際にエラー発生：CSS・jsファイルが自動生成されない事象

はじめに

Laravelの環境構築を終え、Jetstreamのインストール手順をReadoubleを確認しながら
行っていたところエラーが発生し、更に自動生成されるはずのCSS・jsファイルが生成されない
事象に出会してしまったものの、もがき続けた結果なんとか解決したため、その方法を記載します。
タイトルのコマンドを実行し同じようなエラーに苦しまれている方が、この記事をきっかけに
少しでも解決に繋げていただけたら幸いです。

環境

・macOS Monterey バージョン12.4
・PHP：v8.1.8
・Laravel：v9.21.1
・Vite：v3.0.4
・node：v16.16.0
・npm：8.11.0
・n：v9.0.0

エラー発生事の状況

・実行したコマンド

npm install && npm run dev

・エラー内容

・上記のログでは、今のnodeのバージョン(14.15.4)とViteのバージョン(3.04)に互換性が
なく、nodeのバージョンが最低でも14.18.0もしくは16.0.0以上でないといけない、
と怒られています。

原因

・nodeのバージョンが古い
・Laravelのバージョンに対して、実行しているコマンドが違う　
( ↑こちらに関しては後ほど、ご説明します。 )

解決策

・nodeの最新化
・npm run devではなく、別のコマンドを実行

・nodeのバージョンアップ方法

1. nのインストール
   ※ nとは、node.jsのバージョンを管理するツールです。
   ・インストールするためのコマンドを実行

npm install -g n

しかし、これを実行しようとすると以下のエラーが出てきます。

npmのデフォルトディレクトリを作成するため、以下のコマンドを一行ずつ実行。

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo ' export PATH=~/.npm-global/bin:$PATH' >> ~/.bash_profile
source ~/.bash_profile

もう一度、nをインストールするためのコマンドを実行すると先ほどのエラーは消えます。

・アップデート前のnodeのバージョンを確認

$ node -v

v14.15.4

$ npm -v

6.14.10

・最新のnodeの安定版のバージョンを確認

n --stable

16.16.0

・最新の安定版のバージョンをインストール

latestは最新の機能を搭載した最新版へのアップデートになります。

n latest

何やら権限関係の問題で、以下のエラーが出ます。

上記では、「sudoコマンドの実行が必要。もしくは、パーミッションを変更するか、N_PREFIXを使用してください」と怒られています。

・今回はsudoコマンドで対応

sudo n stable

以下のように、パスワードが求められるので、ご自身で設定しているパスワードを
入力してください。(PCを開く時や、場合によってはソフトウェアのインストール時に求められるパスワードです。)

成功すると以下のようにログが出ます。
(nodeとnpmが同時にアップデートされているのがわかります！)

・nodeのバージョンを確認します。

node -v

v16.16.0
無事にアップデートができています！

・そしていよいよ、最初のコマンドを実行します。

 npm install && npm run dev

結果は...

最初に出ていた、nodeとviteのバージョンによる互換性がない等のエラーは消えました!!
ただ、ファイルが生成されるとログ出力されるはずの「Success」が見当たらない。。。笑
※ちなみに、「npm install && npm run dev」と言うのは、「npm install」と「npm run dev」を
一緒に行えるというものなので、別々でコマンドを実行しても問題ありません。
また、キャプチャに出ているログはエラーではないのでご安心ください。
「npm run dev」でViteのサーバーを起動する事ができると言うことなので、このタイミングで
覚えちゃってください！

・CSSファイルとjsファイルが自動生成されない本当の理由

この後、解決方法を探しいろいろと彷徨いましたが、こちらが冒頭の「原因」でお伝えした
もう一方の「Laravelのバージョンに対して、実行するコマンドが違っている」と言う事です。
具体的にどう言う事かというと、Laravel 9.1.8以降では先ほどからチラチラと出ている
「Vite」と言う新しい機能が追加された事が影響を及ぼしているようです。
（それ以前は、Laravel-mixと言う機能だったらしい。）
つまり、Laravel　9.2.1の環境では、ギリギリ以前のコマンドでは自動生成が
成功しないと言う事です。笑

・Laravel 9.1.8以降の環境で、ファイルを自動生成する場合

以下のコマンドを「npm run dev」の代わりに実行します。

npm run build

そう、「dev」が「build」になっただけ！
これを見つけるのに何時間かかったことか。。。
コマンド実行後の実際のレスポンスが以下です。

成功すると、上記のようにファイル名や実際にファイルが生成されたディレクトリまで、
親切にログに出してくれています！(「Success!!」的な表示がなかったのはちょっと悲しい...笑)

・自動生成されたファイル

実際に自動生成されたファイルが以下です。
public / build / の配下に　assetsフォルダと共にファイルが生成されているのがわかります！

最後に

今回の件に関しましては、ここ最近で一番と言って良いほどバージョン起因の問題で
悩まされました。正直、気持ちは諦めかけていましたが、なぜか手だけは動いていました。笑
こういう経験をすると、確かに経験値は溜まり今後に活かせる部分もあるのでしょうけど
それ以上に、「エンジニアが一生勉強しないといけない」といった理由を肌で関じますよね。
まだまだ勉強不足なので、大して偉そなうな事は言えませんが、自分で気づいたことや
解決できた事などを、今後も少しずつ発信していけたらなと思います。
長くなってしまい恐縮ですが、最後までお読みいただきありがとうございました！

参考

・https://qiita.com/NaokiIshimura/items/cc07441939b226e779c6
・https://parashuto.com/rriver/tools/updating-node-js-and-npm
・https://yucatio.hatenablog.com/entry/2019/12/06/081900
・https://stackoverflow.com/questions/72829561/npm-run-dev-in-laravel-9
・https://techvblogs.com/blog/how-to-install-bootstrap-5-in-laravel-9-with-vite