フロントエンド周りのライブラリを更新しているときに、html-loader
を0.5系から1.x系にアップデートしたらvueのテンプレートがある場合に動かなくなってしまった
影響範囲は、Storybookのyarn run build-storybook
を実行して出力したファイルのみ
事象はビルド後もStyledComponentsのタグがHTMLのタグに展開されず、StyledComponentsタグのままで出力される
原因は、ケバブケースとキャメルケースの混合が問題だった(ここをケバブケースのみにしたら問題が解消された)
<a-inputText>
アトミックデザインを導入していて、外部コンポーネントとStyledComponentsを区別するために、a-``m-``o-
のプレフィックスをつける工夫をしていて、確かにプレフィックス部分だけケバブになるちょっと特殊な形ではあったが、普通にbuildしただけでは問題なく動いていたのでよしとしていた
いったん、バージョンアップはやめるとして、このケバブとキャメルが混合しているケースもやめたいと思う
ちなみに、vueのドキュメントではコンポーネント名にはパスカルとケバブの2つが選択できるとのことなので、このどちらかに統一しようと思う