Next.jsのプロジェクトで、next devを実行すると
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/ ・ ・
のようなエラーが発生しました。
「良くわからないエラーが出ているけど、普通にアプリは動かせるな･･･」
「じゃあ放置しといても問題ないかな…？」
と思ったのですが、しばらく使っているとソースコードを編集しても、いつものようにホットモジュールが走らなくなっていることに気づきました。
このエラーは何
良くわからないのですが、webpackの何らかのエラーのせいらしい。
とりあえず、このエラーのせいでホットモジュール機能（ソースを書き直すと自動でブラウザがリロードされるやつ）が使えなくなるらしい。
詳細はわかりません。
［バグ］ローカルサーバ起動時の Watchpack エラー · Issue #12 · h-yoshikawa44/portfolio
原因
プロジェクトフォルダをWindows管理下のフォルダに置いて、それのフォルダをWSLターミナルで開くとこのようなエラーが発生するらしい。
というかMicrosoft側も「WSLでWindows管理下のフォルダはイジるんじゃねえ。何が起こるか分からんぞ」みたいなことを言ってるっぽいので、これは推奨されたことではなかったっぽいです。
解決方法
プロジェクトのディレクトリをWSL内に置くと、解決しました。
順番に書いていきます。
まずWSL内のディレクトリは、Windowsから見ると
\\wsl$
というパスで開くことが出来ます。
（Windowsから見て、WSLはネットワーク上に存在するような扱いになるらしい）
なので、例えばAというユーザーのhomeディレクトリ直下にプロジェクトディレクトリBを移動した場合は
\\wsl$Ubuntu-20.04\home\A\B\
みたいなパスに置いて、あとは以下のパスをWSLで開いてWebpackを動かすと正常に動作するはずです。
/home/A/B/
おわり
コメント