はじめに

業務でTypeScriptとReactを使って新しくプロジェクトを作ることになりました。
その際、Node.jsのバージョンを普段使っているものと異なるものにする必要があったため、nvmを使用しました。
そこで悪戦苦闘し、時間を溶かしてしまったのでその経緯を記録として残します。

要はしょうもないミス

長くなるので先に結論から書いておくと、原因は以下の2点に集約されます。

nvmを入れる前に、Node.jsをアンインストールするべきだった
voltaというバージョン管理をすでに導入していたのを忘れていた

どちらも初歩的なミスですが、これに気づかずかなりの時間うんうんうなっていました。
では、解決のために何をしたのかを書いておきます。

やったこと

viteの導入

yarn create vite

これは成功

依存関係のインストール

yarn

ここで以下のように失敗

The engine "node" is incompatible with this module. Expected version "^18.18.0 || >=20.0.0". Got "18.12.0"
からわかるように、想定しているNode.jsと使用しているバージョンが異なるためエラーになっていました。

自身の環境で使用しているNode.jsのバージョンは18.12.0です。

ここで「別のNode.jsを入れる必要があるな」と思いnvmを導入することを決めました。

nvmの導入

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

source ~/.bashrc

nvm install v18.20.2

nvmはNode.jsのバージョン管理ができるツールです。プロジェクトによってNode.jsのバージョンを使い分けたいとき、簡単にバージョンを切り替えることができます。
今回はnvmを入れて、Node.jsのv18で一番新しいものを入れました。

本来はここで既存のNode.jsをアンインストールして、まっさらな状態でnvmを導入するべきでした。それを怠ったため、今回の無駄な苦労が発生しました。

依存関係のインストール（2回目）

これでNode.jsのバージョンが新しくなったので、行けるだろうと思って再実行しましたが、結果は以下の通りです。

エラーメッセージが変わりません。
Got "18.12.0"
とあるように、使われているバージョンが変わっていないようでした。

nvmでのバージョンの指定

nvmではuseコマンドを使って使うバージョンを指定する必要があるらしいので、バージョンを以下の通り指定。

nvm use 18.20.2

依存関係のインストール（3回目）

3度目の正直ということで、三度yarnを実行しました。

見事成功します。

後続の一連の失敗を考えると、なぜここで成功したのか今となっては不明です。

package.jsonの生成

ここもよくわからないポイントですが、一応やったことの記録として残っているので紹介します。

yarn create viteした時点でpackage.jsonが作成されているはずなので、本来は生成不要

yarn init

モジュールの追加

これも今となってはなぜやったのかよくわかっていません。
どこかの環境構築のサイトを見様見真似でやった結果かと思います。

依存関係のインストールの時点で必要なものが諸々入っているはずなので、本来このモジュール追加は不要

yarn add vite typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint --dev

結果、はじめに行った依存関係のインストールと同じエラーが出てパニックになりました。
先ほどから設定を変えていなはずなのに、同じエラーがでてしまったからです。
（今思えば、自分自身がワケのわからないオペレーションをしているのが悪いのですが…）

ここでは、nvmを使用してバージョンを18.20.2に変えたはずなのに、エラーメッセージ上では18.12.0が使われていることになっており、大パニックでした。
node -vコマンドや、nvm currentコマンドでバージョンを確認しても、18.20.2が出てくるので、一体どこの設定が悪くて18.12.0がゾンビのように蘇ってきているのか不思議でなりませんでした。

冒頭に述べた通り、正解はnvmではなくvaultが導入されており、そちらでは18.12.0のままだったことが原因です。
（そうなると、なぜyarnがうまく行ったのか説明がつきませんが…）

再度原因の分析

nvmでバージョン管理をするには、同じフォルダ内で.nvmrcというファイルを作成し、そちらにバージョンを記載する必要があること
yarnのキャッシュが残っている可能性があるため、yarn cache cleanでキャッシュを消す必要がある
package.jsonでengineのプロパティを設定したほうがよい

など、様々な情報が出てきたので片っ端から試しましたが、いずれを試してもうまくいかずここまででほぼ丸一日時間を費やしていました。

Node.jsをアンインストールする？

そんな折、そもそも元からあったNode.jsを消さずにnvmを導入したからだめなのでは、という閃きを得ます。

そこで、以下のサイトを参考にNode.jsのアンインストールを試みます。
https://blog.proglus.jp/5518/

パッケージ版でインストールしている場合

以下のコマンドでバージョンが表示されていれば、パッケージ版でインストールしていることになるそうです。

/usr/local/bin/node -v

しかし、結果は以下の通りでした。

zsh: no such file or directory: /usr/local/bin/node

そんなファイルやディレクトリがない、とのことだったので私のNode.jsはパッケージ版ではないことがわかりました。

homebrewでインストールしている場合

brew list node

No such keg: /opt/homebrew/Cellar/node

上記コマンドで一覧が表示されれば、homebrewでインストールされていることになりますが、エラーメッセージの通り、私の場合は違いました。

nodebrewでインストールしている場合

nodebrew -v

zsh: command not found: nodebrew

こちらもバージョンが表示されず、完全に露頭に迷いました。
この時点での私は万策尽きた状態で、絶望していました。

Node.jsよ、どこにいる

絶望のさなか、ネットを彷徨っていると、どこのサイトかは記録を残していなかったのですが、Node.jsがどこにいるのかを確認できるコマンドがありました。

which node

実行結果は以下のとおりです。

/Users/{ユーザー名}/.volta/bin/node

どうやら、voltaというのが鍵なようです。
調べてみると、これもNode.jsのバージョン管理用ツールのようでした

全く導入した記憶がなかったのですが、私が4月に行った環境構築で自ら残した手順の証跡をたどると確実に自身の手でインストールしていました。
恐ろしいですね。

まとめ

今回は全く他人には参考にならない自分の失敗をまとめてみました。
あまりネット上には失敗の軌跡が残されていないように思ったので、恥ずかしながらこんな愚かな失敗をしている人もいるのだ、という戒めの意味を込めて記録として残しておきます。

学びとしては環境構築の手順の際、その手順はなんのためにやっているのか、を確実に理解しながらやることが肝要だということです。

ただやみくもに右から左にやるのではなく、意味を考えることで詰まったときのリカバリも容易になるのでは、と思いました。