Preact と TypeScript を使った環境で Storybook を使おうとしたら以下のエラーが出ました。
<img src="https://blog-assets.kubosho.com/storybook_error.png" alt="Storybook上で出たエラー。ReferenceError: h is not definedと出ている。">
原因は Storybook を使うために必要なパッケージと Babel の設定が足りなかったことでした。
なので、<a href="https://github.com/storybookjs/storybook/tree/master/lib/cli#manually-specify-project-type">storybook/lib/cli#Manually specify project type</a>を参考に、次のコマンドを実行します。
<pre class="language-shell"><code class="language-shell">npx -p @storybook/cli sb init --type preact
</code></pre>
そして <code>.babelrc.js</code> を次のような設定にします。
<pre class="language-javascript"><code class="language-javascript">const presets = ['@babel/preset-env', '@babel/preset-typescript'];
const plugins = [
 [
 '@babel/plugin-transform-react-jsx',
 {
 runtime: 'automatic',
 importSource: 'preact',
 },
 ],
];

module.exports = { presets, plugins };
</code></pre>
これで Yarn を使っている環境であれば <code>yarn storybook</code> をターミナル上で実行することで、Storybook が表示されるようになります。
<h2>参考にしたページ</h2>
<ul>
<li><a href="https://github.com/preactjs/preact-compat/issues/541">Uncaught ReferenceError: h is not defined · Issue #541 · preactjs/preact-compat</a></li>
</ul>

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

タグ「Storybook」の記事一覧