⇠ chan.dev / posts

Storybook gotchas

🌱 This post is in the growth phase. It may still be useful as it grows up.

Source doc block

Without the use of a Story block, the Source block shows JSX.

The Story component actually emits the source to show, when rendered. So it has to be present if you want to see JSX


Meta must be important as named export


import { Meta } from "@storybook/blocks"
<Meta />


import * as Blocks from "@storybook/blocks"
<Blocks.Meta />


import { Meta as BlockMeta } from "@storybook/blocks"
<BlocksMeta />

Alt (double import):

import { Meta } from "@storybook/blocks"
import * as Blocks from "@storybook/blocks"
<Meta />
<Blocks.Story />
<Blocks.Canvas />


It’s not necessarily on purpose, but it’s because the Meta is read via the AST, and then the information is statically extracted. The actual Meta component is more or less a no-op. And our static extraction logic just doesn’t take that case into account when looking for it.


If you’re importing components by named exports, you’re bound to have naming conflicts. These can be resolved via double import statement or as import directive

(page not available)

when somethnig gets moved by title only (not file system), the page will disappear

general ones

.ts can’t render JSX. need .tsx