状況
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のさらなる発展を祈っております。。