PreactとTypeScriptを使った環境でStorybookを使う方法
Preact と TypeScript を使った環境で Storybook を使おうとしたら以下のエラーが出ました。
原因は Storybook を使うために必要なパッケージと Babel の設定が足りなかったことでした。
なので、storybook/lib/cli#Manually specify project typeを参考に、次のコマンドを実行します。
npx -p @storybook/cli sb init --type preact
そして .babelrc.js を次のような設定にします。
const presets = ['@babel/preset-env', '@babel/preset-typescript'];
const plugins = [
[
'@babel/plugin-transform-react-jsx',
{
runtime: 'automatic',
importSource: 'preact',
},
],
];
module.exports = { presets, plugins };
これで Yarn を使っている環境であれば yarn storybook をターミナル上で実行することで、Storybook が表示されるようになります。