@Mervelickintopgunposted at 2022-07-17

WSL2でFast Refreshを使いたい

Q&A

Closed

現在WSL2でNodemonやFast Refreshのリアルタイムアップデートの機能を利用したいと思っているのですが、実装中にエラーが発生してしまいました。解決方法を教えていただけると幸いです。

Next.jsアプリケーションでJSファイルを更新しましたが、特に反応がないようです。もう一度npm run devをすると反映されますが、これだと開発を進めるのにかなり時間を要する気がしています。

LinuxとWindowsのInotify機能が連携していないのが原因らしいのですが、ウェブ上に記載の解決方法がワークしていない状況です。

1.Next.js + nodemon
package.jsonファイル上で以下のように記載してみましたが、localhostに表示されないので表示はみられず。nodemonがすべてのinde.jsファイルをウォッチしているようです。

{
"scripts": "nodemon -L index.js"
}

PS：
かれこれこのエラーに１か月くらいかかりっきりで悲しくなってきました。。。

4Answer

以下によれば,WSL2におけるinotifyはext4ファイルシステムでしか機能しないとあります./mnt/c下やそれらへのシンボリックリンクでは正しく動作しないようです.

構成のより詳細な情報をお願いします.

1Like

具体的にどこに開発環境をどのように整備して
どうやって実行しようとしているのか

というのは

WSL2上にUbuntu22.04LTSをインストール
Ubuntu上にNode.js 16 LTSをインストール
Windows上のVSCodeにRemote-WSLをインストール
Ubuntuで~(/home/user)で$ npx create-next-app next-testを実行し,/home/user/next-testで$ code .を実行する
起動したVSCode上でターミナルから$ npm run devを実行

ぐらいは書くものです.
少なくともこちらの環境ではこれでFast Refreshの動作を確認できました.

頂いた情報に沿って、WSLのhomeディレクトリ下にsudoコマンド（権限の問題）で、

よほどのことがない限りnpmをsudoで動かしてはいけません.(npmでsudoしないといけない状況というのはほとんどありませんし,それが必要な場合は恐らくnodeごと壊れています)
パッケージがぐちゃぐちゃになりますし,特権ユーザーでのサーバー起動は脆弱性になり得ます.

1Like

まずやろうとしているのは、Windows WSL2（Ubuntu2.0）環境にNext.jsアプリケーションを構築して開発を進めようと思っていました。

頂いた情報に沿って、WSLのhomeディレクトリ下にsudoコマンド（権限の問題）で、

mkdir -> node.jsをインストール -> npm create-next-app@latest -> npm run devを実施すると以下のようなエラーとなります。

0Like

ちなみにエラーログは下図の通りです。

0Like