Typescript problem with storybook migration to CSF

user_14164646 0
Viewed 852

After migrating 50+ stories to CSF, they wouldn't show up in the storybook. After some digging I found out I had to pass the component key to the default export with the component as it's value

export default {
title: "Title"
component: MyComponent
}

the problem is that all my components are using Typescript and for some reason there is an error:

Default export of the module has or is using private name 'MyComponentProps'.ts(4082)

Any help on this would be very appreciated.

storybook typescript reactjs
2 Answers

You can either change their props to type instead of interface, like @Mayank suggested, or you can simply make sure to export their props.

Example:

interface Props {
  name: string;
}

const ({ name }: Props) => {
  return <div>{name}</div>;
}

This code will give the TS4082 you are getting if you try to create a story for this component.

If you export the interface:

export interface Props {
  name: string;
}

const ({ name }: Props) => {
  return <div>{name}</div>;
}

the error will disappear.

user_9989190

I'm assuming you have defined an interface for MyComponentProps. Try changing it into a type declaration. That fixed it for me.

user_48789460
Related