React-styleguidist: Using recompose components don't get found

Created on 24 Nov 2017  ·  10Comments  ·  Source: styleguidist/react-styleguidist

As title describes, when I create a UI component using recompose react-styleguidist doesn't pick up that it's a react component and doesn't render it to the styleguide. E.g. when using thecomponentFromProp hoc.

question

Most helpful comment

@sapegin I'm still sort of getting this issue. My component is showing up in the styleguide, but there's a warning in the console and I'm unable to see the prop types I've declared.

Warning:

Compiling...Warning: Cannot parse client/components/create_task_actions/create_task_actions.jsx: TypeError: Got unsupported definition type. Definition must be one of ObjectExpression, ClassDeclaration, ClassExpression,VariableDeclaration, ArrowFunctionExpression, FunctionExpression, TaggedTemplateExpression or FunctionDeclaration. Got "CallExpression"instead.

Component:

const CreateTaskActions = withProps(props => ({
  buttons: [
    { name: 'plus', onClick: props.onCreateTask },
    { name: 'clock-o', onClick: props.onClickExpectedDuration },
    { name: 'info', onClick: props.onClickInfo },
    { name: 'times', onClick: props.onClearTask },
  ],
}))(IconButtons);

CreateTaskActions.propTypes = {
  onClickCreate: PropTypes.func.isRequired,
  onClickExpectedDuration: PropTypes.func.isRequired,
  onClickInfo: PropTypes.func.isRequired,
  onClickClear: PropTypes.func.isRequired,
}

/**
 * @component 
 */
export default CreateTaskActions;

All 10 comments

I believe this will fix that: #657.

Closing this for now. Feel free to reopen if you still have this issue.

@sapegin I'm still sort of getting this issue. My component is showing up in the styleguide, but there's a warning in the console and I'm unable to see the prop types I've declared.

Warning:

Compiling...Warning: Cannot parse client/components/create_task_actions/create_task_actions.jsx: TypeError: Got unsupported definition type. Definition must be one of ObjectExpression, ClassDeclaration, ClassExpression,VariableDeclaration, ArrowFunctionExpression, FunctionExpression, TaggedTemplateExpression or FunctionDeclaration. Got "CallExpression"instead.

Component:

const CreateTaskActions = withProps(props => ({
  buttons: [
    { name: 'plus', onClick: props.onCreateTask },
    { name: 'clock-o', onClick: props.onClickExpectedDuration },
    { name: 'info', onClick: props.onClickInfo },
    { name: 'times', onClick: props.onClearTask },
  ],
}))(IconButtons);

CreateTaskActions.propTypes = {
  onClickCreate: PropTypes.func.isRequired,
  onClickExpectedDuration: PropTypes.func.isRequired,
  onClickInfo: PropTypes.func.isRequired,
  onClickClear: PropTypes.func.isRequired,
}

/**
 * @component 
 */
export default CreateTaskActions;

I'm getting the same behavior as @Didericis

It would be nice to get to the bottom of this. This is what is preventing us from switching to Emotion.js with its use of recompose.

Problem not yet solve?

Nothin eh?

@sapegin, does #657 solved the issue with redux and propTypes tables?

We still cannot get propType table if the component is connected with redux. We had to split our UI component and the connect logic in order to be able to display our propTypes.

I don't know, try it ;-)

@sapegin, well, as I said, we have tried before. I did try again with 7.0.9. As an user and the main maintainer, did you experience issues while trying to generate the documentation for react-redux? I'll be happy to see what I can do if you want to support such feature. Just need to know as much as you can say about the implementation.

Was this page helpful?
0 / 5 - 0 ratings