はじめに

WSL上のUbuntuターミナルで、Viteを使ってReactプロジェクトを作成しようとしたところ、エラーが発生しました。この記事では、その原因と解決方法について解説していきます。

今回発生した問題

結論から言うと、WSL上のターミナルが、WSL内のnpmではなくWindows本体にインストールされたnpmを誤って呼び出していたことが原因です。
Node.js / npm の環境が正しく分離・管理されていなっかたんですね。

ここからは、実際に行った手順を丁寧に解説していきます。

まず、WSL上にnvm(Node Version Manager)のインストールしていきます。

なぜnvmを使うのか？

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

次に、ターミナルの再起動とNode.jsのインストールを行います

source ~/.bashrc
nvm install --lts

もし解決していれば、ターミナルで

which npm

と打てば、

/home/username/.nvm/versions/node/v22.17.1/bin/npm

のように出てくるかと思います。

WSLで開発を行う際は、ツールのインストールもWSL内で完結させ、環境の分離をしっかり行うことが大切だと感じました。
この記事が、同じ問題で悩んでいる方の助けになれば幸いです。