When trying to publish a Storybook story to DSM, you may encounter the following error:
No suitable component definition found.
This error can often be caused by limitations with the library react-docgen. We use this library to turn React code into an abstract syntax tree and parse the props from your component. Storybook also uses react-docgen to build prop tables in Storybook v6.
If you import a component into a story file that wraps a “base” component, you may encounter an issue where react-docgen cannot find the base component, resulting in the error No suitable component definition found.
export const Button = styled(ButtonBase)` // Your styles here `
In the above example, react-docgen will try to find the ButtonBase component, but fail, giving the No suitable component definition found error. If you encounter this error, we recommend exporting the ButtonBase. For example: