No suitable component definition found

I know this is not an issue specifically with react-styleguidist, for example: https://github.com/reactjs/react-docgen/issues/29

This happens in a lot of cases: when extending/composing components, or when using Redux and the connect() wrapper. For example, the following component is not recognised:

class Theme extends Component {
  // ...
  render() {
    // ...
  }
}

function mapStateToProps(state) {
  const variables = selectVariables(state.theme.name)
  return {
    variables: selectVariables(state.theme.name),
    styles: selectStyles(state.theme.name, variables)
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ThemeActions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Theme)

When using wrappers, we could use two files: _Theme.jsx (export “raw” component and use it for styleguide), and Theme (that uses wrappers etc.). However it would be great if it just work.

Any ideas on what needs to be done?

[sapegin]

@jameslaneconkling This looks like a bug in react-docgen.

[jameslaneconkling]

Documenting this here in case it’s of help to anyone.

Returning a ternary from a stateless component threw the No suitable component definition found Error.

const Tooltip = ({ x, y, xOffset, yOffset, children }) => (
  typeof x === 'number' && typeof y === 'number' ? (
    <div
      style={{
        position: 'absolute',
        top: y + yOffset,
        left: x + xOffset,
        pointerEvents: 'none'
      }}
    >
      { children }
    </div>
  ) : (
    <noscript />
  )
);

Refactoring to use an if statement fixed it:

const Tooltip = ({ x, y, xOffset, yOffset, children }) => {
  if (typeof x === 'number' && typeof y === 'number') {
    return (
      <div
        style={{
          position: 'absolute',
          top: y + yOffset,
          left: x + xOffset,
          pointerEvents: 'none'
        }}
      >
        { children }
      </div>
    );
  }

  return <noscript />;
};