[SOLVED] React Styleguidist failing when Component has Children

React Styleguidist failing when Component has Children

We're using React Styleguidist to produce documentation out of the definitions of a project's components. We plan on serving such documentation via Github pages.

A snippet of our code:

Button.tsx

export default class Button extends PureComponent<Props> {
    [...]
    render() {

        const { href, type, children, theme, size } = this.props
        const buttonChildren = children ? children : 'Button Text'
        [...]
        return <button  type="button">{buttonChildren}</button>
    }
}

Readme.md

[...]
Default Button
```jsx
<div className="styleguide-preview">
    <Button /> 
</div>
```

Upon running the styleguidist build command via the NPM script we set up, everything works fine. We are able to see the Button, and its content falling back to the default "Button Text". If we change the markdown file to include <Button> Default </Button>, the dev version of the resultant documentation works fine (and its button preview shows the expected " Default ". When we check out the built version of the docs, we get the following error: ReferenceError: t is not defined. No button is shown in the previews, only the error message.

The only difference between Styleguidist producing a working build of the docs and a faulty one is (as far as we can see) including or not children to the Button component, in the markdown readme file.

Are we doing something blatantly wrong here? Any help or hint is appreciated :)

Solution

This is a known issue. Always check GitHub first and report bugs there if they aren’t reported yet.