WSLにzenn-cliをインストールするとホットリロードが動作しない

[kesera2]

内容

WSL
$ npx zenn-cli preview

こちらの手順通りに進めるため、wslにzenn-cliをインストールしてブラウザからホットリロードができるかを確認したところ、更新ボタンを押さない限りコンテンツが更新されていないようでした。Chrome拡張機能のせいかと思い、edgeにてlocalhost:8000を開きましたが同様にホットリロードが機能していないようでした。

そのため、試しにpowershell側にzenn-cliをインストールしてみたところ、chromeとedge共にホットリロードが動作しているのを確認しました。

Powershell
$ winget install Node.js
$ npm install zenn-cli
$ npx zenn-cli preview 

環境

• Windows 11 24H2
• Chrome 132.0.6834.196
• Edge バージョン 133.0.3065.59 (公式ビルド) (64 ビット)
• WSL ディストリビューション: Ubuntu 22.04.3 LTS

$ cat /etc/os-release
PRETTY_NAME="Ubuntu 22.04.3 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.3 LTS (Jammy Jellyfish)"
VERSION_CODENAME=jammy
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=jammy

$ node --version
v23.1.0
$ npm --version
10.9.0
$ npx zenn-cli version
zenn-cli@0.1.158

[cm-dyoshikawa]

@kesera2 ご報告ありがとうございます。申し訳ないのですがこちらの開発チームにWSLユーザーがいないため、再現確認が難しくなっています。
同環境で再現を確認できる方のコントリビューションを待ちたいと思います。

[3w36zj6]

chokidarのホットリロードのファイル監視は、WSL2の制約¹により、ファイルがWindowsアプリケーション（WSL2でないプロセス）により編集された場合に動作しません。chokidarのusePollingを有効にすると解決するようですが、CPU使用率が高くなる²と公式に書かれているので、ファイルの編集はWSL2上で行うことを推奨する旨と、環境変数CHOKIDAR_USEPOLLING=trueを好みで設定できる旨ををどこかに記載すると良いと思います。
この事例は同様にchokidarに依存しているViteやCreate React Appのドキュメントで紹介されています。

Footnotes

1. https://github.com/microsoft/WSL/issues/4739 ↩

2. https://github.com/paulmillr/chokidar/tree/3.6.0#performance ↩