Storybook (Vite) が docker + Windows (WSL2) の環境でホットリロードしない問題の解決策

　StorybookはReactコンポーネントの開発などで使える優秀なUIカタログですが、肝心のホットリロードがdocker + Windows (WSL2)の環境でドライブをマウントした場合に動作しません。Storybook公式や海外の質問サイトでも簡単な解決策が紹介されていません。

問題の概要

　ここではStorybookのサンプルとして作られているButtonコンポーネントのラベルをカッコで囲うだけの変更をホットリロードする動作を見てみます。

　Button.jsxの {label} を ({label}) に書き換えて保存しても、CLI上で反応が見られませんし、画面上も変化がないです。

問題の原因

　Viteの公式にも記載されている通り、WSL2でLinuxを動作させている場合、ファイル変更のイベントがOSに認識されない問題があります。このため、ホットリロードが発火しなかったため、上記の問題が発生します。

解決策

　StorybookのフロントのコンパイラにViteを使っている場合、Viteが持っているPollingモード（ファイルを常に監視する機能）を使うことでこれを解決できます。Storybookのmain.jsにあるconfigに以下を追記します。

main.js

...
  viteFinal: async (config, options) => {
    config.server.watch = {
      usePolling: true,
    }
    return config;
  }
...

　修正後のイメージ

　TypeScriptの場合は、引数部分を以下のようにします。

viteFinal: async (config: Vite.InlineConfig, options: Options) => {

　Storybookを起動しなおすと、ホットリロードが動作するようになります。