⛑️
@storybook/angularの6.3以降で日本語をタイトルにできない
@storybook/angularの6.3以降で日本語をdefault exportのtitleに使うと「The selector ... did not match any elements」というエラーになる
原因
@storybook/angularは各StoryをラップするAngularコンポーネントを作る。そのコンポーネントのセレクタにStoryIdを使っている。
HTMLのタグ名にはアルファベットと数字しか使えないので、StoryIdにそれ以外の文字が含まれていると正しくコンポーネントを認識できない。
解決策
HTMLのタグ名として不適切な文字を置換する。既にこの解決策を組み込んでいるフォークがあるので、以下の手順でエラーを解消できる。参考
- 解決策が組み込まれているStorybookのフォークをビルドする
git clone https://github.com/nagashimam/storybook.git
git checkout fix-#15147
yarn
yarn bootstrap #install packagesとbuild packagesを選択
-
Storybookを使いたいプロジェクト(以下ターゲット)の適当なディレクトリにapp/angularディレクトリをコピー
-
ターゲットのpackage.jsonを書き換え
"@storybook/angular": "file:(app/angularをコピーしたディレクトリ)",
-
node_modulesとpackage-lock.jsonを削除してから
npm i -
npm run storybook
その他
GitHubで既にissueが挙がっていたのでコメントしてみた。会話の流れ次第では、公式にPRを送るかもしれない。そうなれば上記の解決策は不要になる。
Discussion