react-docgen-typescript: Problem with functional components

Sorry, I have same problem.

My component path: src/components/modules/Hoge/index.tsx

inside of a component

import * as React from 'react';

/**
 *  properties
 */
interface Props {
  /** id description */
  id: string;
}

/**
 *  Hoge Component
 */
const Hoge: React.StatelessComponent<Props> = ({ id }) => (
  <p id={id}>test</p>
);

export default Hoge;

styleguide.config.js

module.exports = {
  propsParser: require('react-docgen-typescript').parse,
  resolver: require('react-docgen').resolver.findAllComponentDefinitions,
  sections: [
    {
      name: 'Components Title',
      componenets: './src/components/**/index.tsx'
    }
  ]
}

It is not reflected in styleguide well.

I’m actually seeing this problem still (with react-docgen-typescript 1.1.0), but have tested three different ways of exporting a stateless functional component, where the one I happened to be using is the one that didn’t work.

We were exporting components this way, which produces the same error mentioned earlier here:

import * as React from 'react';

interface TestProps {
    text: string;
}

const Icon = ({text}: TestProps) => {
    return (
        <i className="icons">{text}</i>
    );
};

export default Icon;

These two ways seems to work fine:

import * as React from 'react';

interface TestProps {
    text: string;
}

export const Icon = ({text}: TestProps) => {
    return (
        <i className="icons">{text}</i>
    );
};

and

import * as React from 'react';

interface TestProps {
    text: string;
}

export default function Icon({text}: TestProps) {
    return (
        <i className="icons">{text}</i>
    );
}

I’m open to switching to the latter way (want to avoid having to specify on import), but am wondering if the first way is supposed to work.

Edit: I see now a newer issue where this is mentioned as a “well known” issue, so I’ll just use the latter method for now.

export const Icon = ({text}: TestProps) => {
    return (
        <i className="icons">{text}</i>
    );
};

Doesnt seem to work for me. I am getting:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `PreviewComponent`.

Ideally I would love to be able to do

export const Icon = ({text}: TestProps) => (
    <i className="icons">{text}</i>
);

I think most of the thinks mentioned here should be fixed by v1.2.0 or v.1.2.1 so I am closing this issue. If you still have problem also in v1.2.1 please create a new issue.

Could you try to defined the empty props for that component?

import * as React from 'react';
import * as styles from './Logo.styl';

export const Logo = (props: {}) =>
    <span className={styles.logo} />;

export default Logo;