Storybook6.2.0 系の config を TS 化して、main.ts、preview.ts を使えるようにする

いつも忘れるのでメモ。

Storybook 6 系から、config の書き方が変わった。
https://storybook.js.org/docs/react/configure/overview

config の各ファイルには TypeScript が使える。

  • main.js => main.ts
  • preview.js => preview.ts

といった感じになる。

main.ts で config を書く場合、module.export にトランスパイルされるように書く必要がある。 module: "CommonJS"にする。

しかし、Storybook6.2.0 系の時、ただ拡張子を.ts にしても失敗してしまう。

Storybook6.0.0 で試したところ動いたので、何かしら依存パッケージの変更が 6.0.0 から 6.2.0 の間で発生したかもしれない。

失敗する原因

再現できる環境を用意した。

  • storybook-6.2.0 => Storybook 6.2.0 を install
  • storybook-6.2.0-ts => storybook-6.2.0 の config ファイルを.ts に変更した
  • storybook-6.2.0-ts-install-ts-node => storybook-6.2.0-ts にts-nodeを devDependencies として install
  • storybook-6.2.9 => npx sb initで現在最新の 6.2.9 を取り込んだ上で拡張子を.ts にした

storybook-6.2.0 はまだ.js ファイルなので動く。
storybook-6.2.0-ts だと動かない。

SyntaxError: repro-storybook-config-ts/storybook-6.2.0-ts/.storybook/main.ts: Unexpected token, expected "{" (12:7)
ERR!
ERR!   10 | }
ERR!   11 |
ERR! > 12 | export = config
ERR!      |        ^

...

ERR!   loc: Position { line: 12, column: 7 },
ERR!   pos: 211,
ERR!   code: 'BABEL_PARSE_ERROR',
ERR!   reasonCode: 'UnexpectedToken'
ERR! }

といった感じで、config ファイルをトランスパイルできていない。

そこで、storybook-6.2.0-ts-install-ts-node のように、依存に ts-node を足す。
そうすることで動くようになる。

終わりに

なぜ暗黙の依存関係が発生しているのか、しかも個別に依存しないといけないのかよく調べておらず、6.3.0 系から改善されるかもわからない。
config を ts で書きたい場合にうまく動かない場合は、依存に ts-node を足すのを忘れないようにしておきたい。