Gatsby で Picturefill

なんだかんだで、IE11まだ対応しますよね
で、Picturefill が必要だったんですね。

Gatsby と一緒に使おうと思ってググったけど、どストライクなの見つからなかったの

いくつか見つかった記事を参考に色々試したけども、なんか違う。

useEffect で picturefill() しようとしたら、
import 'picturefill' 書いた時点で window がないとビルドでこける。（開発時は大丈夫）

gatsby-browser.js の onClientEntry や onRouteUpdate で picturefill() 呼ぶと動く。けど、動的に picture 要素足した（変更した）場合、適応されない。

などなど、紆余曲折ありつつ、 picturefill の mutation plugin を使う方法にたどり着いた。
このプラグインは picturefill() を自動でやってくれるというもの。

gatsby-browser.js でインポートするだけ

import 'picturefill'
import 'picturefill/dist/plugins/mutation/pf.mutation'