Rails + Vueでwebpack command not foundと言われるエラー

導入

Rails + Vueを使ったアプリをサンプルで作ってみようと思った時に導入地点でハマったので備忘録に記載しておく。

エラー内容

参考: https://qiita.com/shizen-shin/items/38fd774ffc87bc8838c9

こちらの記事を見たところcompileする必要があるとのことなので下記コマンドを入力したが、command not foundと言われてしまった。

$ rails webpacker:compile

bin配下にwebpackは存在していたので原因がよくわからずnode_modulesを削除してwebpackerをinstallし直したりと試行錯誤していた中、以下のようなエラーメッセージを発見。

error @npmcli/fs@1.1.0: The engine "node" is incompatible with this module. Expected version "^12.13.0 || ^14.15.0 || >=16". Got "14.0.0"

今のnodeのバージョンに互換性がないとのことなのでnodeのバージョンを変更する。

参考: https://qiita.com/sugasaki/items/8cb12c06d2a44515194a

参考: https://qiita.com/tonkotsuboy_com/items/5322d226b6783d25b5df

こちらを参考にNode.jsのバージョン管理ツールのnodenvをインストールした後、

# 必要なバージョンをインストール
$ nodenv install (xx.xx.xx)

# インストールしたバージョンを該当のプロジェクトに反映させる
$ nodenv local (xx.xx.xx)

# バージョンが反映されているか確認
$ node -v

# package.jsonに定義されてる依存関係をインストール
$ yarn install

ひとまずはこれで解決できました。

Node.js関連の知識がまだまだ薄いので補足等いただけると大変助かりますm(_ _)m