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
を足すのを忘れないようにしておきたい。