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 3月 4 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 3月 4 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 が何かと警告してくれるのは有難いなぁ。
Discussion