⛑️

Win→WSLにフォルダをコピーしたらViteが動かなくなる

に公開

初歩だけど書いておきます。
タイトルに「Vite が」と書いてますが、Vite の問題ではなく、どんな環境でも起こりえます。

見た目の症状

例えばこんなエラーが出る。

$ npm run dev

> vite-vue-project@0.0.0 dev
> vite

sh: 1: vite: Permission denied

直し方

Vite で作ったプロジェクトなら(npm でパッケージ管理しているプロジェクトなら)、以下の方法が早いかもしれない。

$ rm -rf node_modules
$ npm install

node_modules フォルダの中のファイルがトラブっているので、要はインストールし直しです。
もしプロジェクトツリー全体を git clone しなおせるなら、そうしてから npm install すればなお安全です。

何が起きてるのか

慣れてる人はすぐ気付くやつですが、異なるファイルシステム(OS)間でファイルを移動するといろんなトラブルが起きます。特に Windows(MS-DOS)と Unix 系の間で。

エラーになっているのは vite という名前のファイルで、node_modules/.bin/ の下にあるので、コピー元とコピー先のファイルを比べてみると..

$ ls -l /mnt/c/Users/tmura/dev.20250331/vite-vue-project/node_modules/.bin/vite
-rwxr--r-- 1 tmura tmura 381  34 09:52 /mnt/c/Users/tmura/dev.20250331/vite-vue-project/node_modules/.bin/vite
$ ls -l ~/dev/vite-vue-project/node_modules/.bin/vite
-rw-r--r-- 1 tmura tmura 381  34 09:52 /home/tmura/dev/vite-vue-project/node_modules/.bin/vite

ファイルの実行権限がなくなってます(-rwxr--r-- の x が消えている)。そのせいで、実行しようとして "Permission denied" のエラーが出ました。実行権限が必要なファイルは全て同じトラブルが起きるはずです。
大抵は node_modules の中だけ直せば良さそうな気がしますが、他のフォルダにも実行権限が必要なファイルがある場合、npm install し直しだけではダメかもです。

プロジェクトをどのフォルダに作るかは重要

Windows の実行環境で動かすプロジェクトは Windows のファイルシステムに、WSL の環境で動かすプロジェクトは WSL のファイルシステムに作るのが吉です。後で引っ越せば良いと思ってると、思わぬ手間がかかります。動いたとしてもビルド時間などのパフォーマンスが結構違うので損します。
いつからか世の中が仮想化まみれになってしまい、さらに vscode という統合開発環境に隠蔽されてしまって、無意識にやってしまうこともありますが..。vscode が何かと警告してくれるのは有難いなぁ。

GitHubで編集を提案

Discussion