LaravelでJSをインストールしたらエラーが出た原因と解決方法

題名の通り、Laravel開発に必要なJSプラグインをインストールしようとしたらエラーが出たので、今後のメモとして残しておく。

ちなみに、入れようとしたプラグインはSwiperで、下記のコマンドを打った。

npm install swiper

エラーが起きた原因

今回、ここでエラーが出てつまづいた。

原因は、WSL（Ubuntu）でLaravelを使って作業していたにも関わらず、WSL側にnode がインストールされておらず、npm コマンドだけがWindows側（Cドライブ）のNode.jsに依存していたからだ。

この結果、npmがWindowsの cmd.exe やパス（UNC）経由で動こうとしてエラーになっていのだ。

エラーの解決方法

Laravel + Tailwind + Swiper をWSLで使うには、WSL内のNode環境を使うことが絶対条件になる。

繰り返しになるが、私の環境の場合はWindowsのNodeを読みに行こうとするとエラーになってしまうのだ。

そこで、下記のコマンドを打ち込んでWSL内のNode環境を作ることにした。

# nvm をインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# その後、シェルの設定を反映
source ~/.bashrc

# Node.js（LTS）をインストール

nvm install --lts
nvm use --lts

注意点としては、必ずWSLを動かしているVSCODEで行う事。

そうすればWSL内のNode環境を整えることができるので、成功したら下記でインストールの確認作業を行う。

which node      # /home/ユーザー名/.nvm/... などと出るべき
node -v         # バージョン表示される
which npm       # 同じくnvm配下になっていればOK
npm -v

依存関係を解決してJSインストール

最期に依存関係を再構築して、Swiper.jsを追加する。

cd ~/satooya-project

# 依存関係を再インストール
npm install

# Swiperをインストール
npm install swiper

# ビルドして確認
npm run dev

これでWSL内のNodeを使用することになるので、無事にswiperをインストールすることができた。

この後のJS定義の具体的なやり方などは、下記を参照すればOK

Laravelでページ単位でJSを反映させる方法メモ