WindowsでDockerを使ったStorybookでHMRが効かない

状況

Windowsのファイルシステム上に存在するdocker-compose.ymlでLinuxコンテナを起動してStorybookを動かしたのですが、HMRが効きませんでした。

原因

WindowsとLinuxのファイルシステムの違いにより、ファイルの変更（inotify）をコンテナが検知できないことが原因のようです。

回避策

今回は以下の設定をStorybookのwebpack設定に追加して強制的にファイルを監視することにしました。

webpack.config.js

module.exports = async ({ config }) => {
  // --中略--
  config.watchOptions = {
    aggregateTimeout: 200,
    poll: 1000
  }
  // --中略--

この方法はあまりスマートではないですが、簡単に対策が取れます。
他の対策としてこちらの記事の回避策も参考になるかもです。状況や環境によってどの策が良いかは変わるかと思います。

終わりに

都合につきWindowsを使わなければならないので、WindowsとDockerのさらなる発展を祈っております。。