WSLでnpm ERR_INVALID_URLエラーが出る原因と対策

はじめに

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

今回発生した問題

• 環境:

  • OS: Windows 11
  • ターミナル: Windows Terminal(Ubuntu)
  • Node.js: Windowsにも、WSLにもインストールされている状態

  今回実行したコマンド。ViteでReactプロジェクトを作成しようとしたら...

  npm create vite@latest my-react-app -- --template react
  

  ERR_INVALID_URLとエラーが出て、npmが不正なURLを読み込もうとしています。

  npm error code ERR_INVALID_URL
  npm error Invalid URL
  npm error A complete log of this run can be found in: C\Users\username\...
  

なぜこのような問題が発生したのか

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

解決策：nvmを使ったクリーンな環境構築

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

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

なぜnvmを使うのか？

• Node.js のバージョンを自由に切り替えられる

• もし環境が壊れても、簡単にリセット＆再構築できる

• グローバル環境を汚さずに、安全に開発環境を管理できる

  ...など、利点が盛りだくさんだからです。

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内で完結させ、環境の分離をしっかり行うことが大切だと感じました。
この記事が、同じ問題で悩んでいる方の助けになれば幸いです。