Cannot use other components as children in React Styleguidist documentation

Question

I'm using React Styleguidist (version 8.0.6) to document React components. I have a directory structure like this:

Card
- Card.js
- Card.md
ActionItems
- ActionItems.js
- ActionItems.md

Each of these 2 components renders correctly on its own Styleguidist-generated page.

However in Card.md, I want one of my Card examples to contain an <ActionItems/> component as a child, like this:

<Card>
    <ActionItems/>
</Card>

The only example I've found of someone else doing something like this is this stack overflow post.

If I put the following in my Card.md:

```jsx
<Card someAttr="foo">
    <ActionItems someOtherAttr="bar"/>
</Card>
```

Styleguidist errors out with SyntaxError: Expected corresponding JSX closing tag for <React.Fragment>.

As per the stack overflow article I linked earlier, I tried this

```jsx
const ActionItems = require('../ActionItems/ActionItems.js');

<Card someAttr="foo">
    <ActionItems someOtherAttr="bar"/>
</Card>
```

but Styleguidist then gives me a different error: Adjacent JSX elements must be wrapped in an enclosing tag.

Can anyone help me figure out what I'm doing wrong? Or does Styleguidist just not allow you to do what I want to do?

In case it's relevant, if I change the require path to anything else e.g. '/www/javascript/ActionItems/ActionItems.js, Styleguidist fails with the following message

Failed to compile
Module not found: Can't resolve '/www/javascript/ActionItems/ActionItems.js' in '/www/javascript/react-components/Card'

Cannot use other components as children in React Styleguidist documentation

0 Answers0