Preact integration doesn't seem to derive prop types correctly

[rschristian]

Summary

Not quite sure that this isn't user error, so opening here first.

Per the docs, Storybook should be able to correctly derive component prop types but I haven't found this to be the case with the Preact integration. In fact, there's seemingly no way to provide types in a type-safe manner.

// Button.tsx
interface Props {
  text: string;
}

export function Button(props: Props) {
  return <button>{props.text}</button>;
}

// Button.stories.ts
import type { Meta, StoryObj } from '@storybook/preact';
 
import { Button } from './Button.tsx';
 
const meta = {
  component: Button,
} satisfies Meta<typeof Button>;
export default meta;
 
type Story = StoryObj<typeof meta>;
 
export const Basic = {
  args: {
    text: 'Click Me'
    // ^ Object literal may only specify known properties, and 'text' does not exist in type 'Partial<{ component: (props: Props) => Element; }>'.(2353)
   // index.d.ts(1277, 5): The expected type comes from property 'args' which is declared here on type 'Story'
  },
} satisfies Story;

Am I doing something wrong here?

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @rschristian! I'm Dosu and I’m helping the storybook team.

You're not doing anything wrong—this is a limitation of Storybook's Preact integration. Unlike React, which uses react-docgen to automatically infer prop types for stories, Preact does not have an equivalent mechanism in Storybook. As a result, prop types aren't automatically derived for your component, so TypeScript can't validate your story args against your component's props out of the box docs.

To get type-safe stories with Preact, you need to explicitly provide the prop types to Meta and StoryObj. Here’s how you can do it:

import type { Meta, StoryObj } from '@storybook/preact';
import { Button } from './Button';

interface Props {
  text: string;
}

const meta: Meta<Props> = {
  component: Button,
};
export default meta;

type Story = StoryObj<Props>;

export const Basic: Story = {};

export const Primary: Story = {
  args: {
    text: 'Click Me',
  },
};

This pattern ensures your stories are type-checked against your component's props. If you need to add custom args, use an intersection type (e.g., Meta<Props & { customArg?: string }>), as described in this issue.

If you have a minimal reproduction that still doesn't work with explicit typing, please share it so we can dig deeper.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[rschristian]

That would be nice to have in the documentation then though, ideally, Preact would just match React as they're functionally the same.

[rschristian]

This also breaks types which expect strict args, as StoryObj makes everything optional. Non-viable.

[sunnypatell]

@rschristian not user error -- this is a known gap in the preact framework integration. Meta<typeof Button> doesn't extract props correctly because @storybook/preact's internal ComponentProps type doesn't unwrap preact functional components the same way the react framework does.

workaround: pass your props type directly instead of typeof Button:

const meta = {
  component: Button,
} satisfies Meta<Props>;  // Props, not typeof Button
export default meta;

type Story = StoryObj<Props>;

export const Basic = {
  args: { text: 'Click Me' },
} satisfies Story;

the root cause is that storybook uses ComponentProps<T> internally to extract arg types, and the preact version doesn't properly infer from (props: Props) => Element. using Meta<Props> directly bypasses that broken extraction entirely.

the preact framework package just doesn't get the same type-level attention as react/vue. a few related issues have been filed but nothing has landed yet.

[JoviDeCroock]

Should be covered by #33828