CODEWITHSUNDEEP
reactjstypescriptstorybook
user14164646
user14164646

Reputation: 51

Typescript problem with storybook migration to CSF

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.

Upvotes: 5

Views: 2157

Answers (2)

fgblomqvist
fgblomqvist

Reputation: 2434

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.

Upvotes: 10

Mayank Arora
Mayank Arora

Reputation: 21

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

Upvotes: 2

Related Questions