Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Troubleshooting DSM Storybook error "No suitable component definition found"

Follow

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.


Was this article helpful?

Still have a question?

Contact Us