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が表示されるようになります。

参考にしたページ

• Uncaught ReferenceError: h is not defined · Issue #541 · preactjs/preact-compat