Troubleshooting DSM Storybook error "No suitable component definition found"

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.

const ButtonBase = (props) => {
 return <button {...props} />
}

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:

export const ButtonBase = (props) => {
 return <button {...props} />
}

export const Button = styled(ButtonBase)`
 // Your styles here
`

After exporting, you should be able to successfully publish your Storybook story to DSM.