学ぶ、考える、書き出す。

学習し、自分なりに噛み砕いて、書き出すブログ。

PreactとTypeScriptを使った環境でStorybookを使う方法

Preact と TypeScript を使った環境で Storybook を使おうとしたら以下のエラーが出ました。

Storybook上で出たエラー。ReferenceError: h is not definedと出ている。

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

参考にしたページ

記事を共有する

関連記事

  1. ブログ記事を投稿するためのフォームを作った

    はてなブログのMarkdownによる記事編集画面やesa - 自律的なチームのための情報共有サービスのように、本文の編集画面とリアルタイムプレビューが横並びになるような投稿フォームが個人的に好みです。

  2. ブログを国際化対応した

    当ブログのUIで使う文言を国際化対応しました。

  3. AVA上でsinon.useFakeTimers()を複数のテスト内で実行するとエラーが出る

    最近Sinon.JSのバージョンをv14.0.0に上げたときに、エラーが出てテスト実行が失敗するようになりました。

  4. 自分がアクセシビリティ向上に力を入れる理由

    いま自分は、担当サービスのアクセシビリティ向上を推進する「アクセシビリティタスクフォース」を率いる立場になっています(アクセシビリティタスクフォースについては AbemaTV ABEMA iOS版アプリのアクセシビリティ向上支援 | 事例紹介 | 株式会社コンセント で少し触れられています)。