【Storybook】「TypeError: (tag.text || "").trim is not a function」エラーの対処法まとめ

Storybookで以下のようなエラーが出たので、以下、対処法を備忘録としてメモ。

TypeError: (tag.text || "").trim is not a function

なにはともあれ、まずはグーグル先生に質問。

TypeError: (tag.text || "").trim is not a functionで入力した所、storybookが補完候補として出たので、以下のテキストで検索。

TypeError: (tag.text || "").trim is not a function storybook

↓ StorybookレポジトリのIssueが上がっていたので、チェック。

目次

対処法

その1 TypeScriptのバージョンを下げる

after pinning "typescript": "4.2.2" I can confirm that this workaround works

TypeScriptのバージョンを下げると解決する模様。

4.2.2というコメントが多かったけど、4.2.4でも行けたというコメントもあり。

その2 「reactDocgen: 'none'」

I have the same trouble here. To me, this works:

typescript: { reactDocgen: 'none', }

That's in .storybook/main.js in module.exports

.storybook/main.jsに以下の設定を追加でも対応可。

typescript: {
    reactDocgen: 'none',
}

その3 Storybookを「v6.3.0-rc.7」にバージョンアップ

I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-rc.7 containing PR #15247 that references this issue.

v6.3.0-rc.7で対応した模様。

リリース候補版でも、という場合はStorybookのバージョンアップでも行けそう。

(動作確認はしていないので、自己責任でお願いします(汗))

まとめ

リリース候補版で対応されているので、正式版対応もそう遠くないかと思います。

とりあえずその1その2の対応で様子を見て、正式対応版が出るのを待つのが無難かと思います。