Components with defined types not picked up

[kyler-hyuna]

Components that have defined types aren't pickup in the styleguide.

const Button: React.StatelessComponent<ButtonProps> = ({ title }) => (
  <button className="button">{title}</button>
)

export default Button

The above example shows
Warning: src/components/Button/Button.tsx matches a pattern defined in “components” or “sections” options in your style guide config but doesn’t export a component.

It fails for React.Component as well:

class Button extends React.Component<ButtonProps> {
  render() {
    const { title } = this.props

    return <button className="button">{title}</button>
  }
}

export default Button

If I remove the prop definitions to

const Button = ({ title }: ButtonProps) => (
  <button className="button">{title}</button>
)

export default Button

It works again.

Versions:
"react-docgen-typescript": "^1.2.3",
"react-styleguidist": "^6.2.2",
"typescript": "^2.7.1",
"webpack": "^3.10.0"
"react": "^16.2.0"

[pvasek]

Are you really exporting something? You cannot see any exports in your code. Pavel

…

________________________________ From: Kyle Roach <notifications@github.com> Sent: Thursday, February 1, 2018 7:17:44 PM To: styleguidist/react-docgen-typescript Cc: Subscribed Subject: [styleguidist/react-docgen-typescript] Components with defined types not picked up (#71) Components that have defined types aren't pickup in the styleguide. const Button: React.StatelessComponent<ButtonProps> = ({ title }) => ( <button className="button">{title}</button> ) The above example shows Warning: src/components/Button/Button.tsx matches a pattern defined in “components” or “sections” options in your style guide config but doesn’t export a component. It fails for React.Component as well: class Button extends React.Component<ButtonProps> { render() { const { title } = this.props return <button className="button">{title}</button> } } If I remove the prop definitions to const Button = ({ title }: ButtonProps) => ( <button className="button">{title}</button> ) It works again. Versions: "react-docgen-typescript": "^1.2.3", "react-styleguidist": "^6.2.2", "typescript": "^2.7.1", "webpack": "^3.10.0" "react": "^16.2.0" — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#71>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AA5wjJeuiOu8E-pu5jVSydWEaGZItHmAks5tQf_HgaJpZM4R2D1r>.

[kyler-hyuna]

Yea i just omitted the last line for brevity.

[kyler-hyuna]

Alright @pvasek using the example in the repo, I tracked down the problem to the tsconfig setting allowSyntheticDefaultImports.

The only way it picks up the component is if I import * as React from 'react'. However this shouldn't be the case since in my tsconfig.json I have allowSyntheticDefaultImports: true.

Is there a way that react-docgen can read the setting from my tsconfig?

[kyler-hyuna]

Alright so I fixed it. Apparently docgen doesn't pick up by default the tsconfig.json at the project root and I had to explicitly provide the path.

Final styleguide.config.js:

module.exports = {
  components: 'src/components/**/[A-Z]*.{ts,tsx}',
  webpackConfig: require('./webpack.dev.js'),
  resolver: require('react-docgen').resolver.findAllComponentDefinitions,
  propsParser: require('react-docgen-typescript').withCustomConfig(
    './tsconfig.json'
  ).parse,
}

[pvasek]

Yes, you are right. You need to define it explicitly.

[karolis-sh]

I'm still facing this issue (though a bit different approach I guess)

This works:

import cx from 'classnames';
import * as PropTypes from 'prop-types';
import * as React from 'react';

import { CLASS_PREFIX } from '../_constants';

export interface ContainerProps extends React.HTMLProps<HTMLDivElement> {
  fluid: boolean;
}

const Container: React.FC<ContainerProps> = ({
  className,
  fluid,
  ...props
}) => {
  const classes = cx(
    CLASS_PREFIX + '-container px-5',
    fluid ? 'container-fluid' : 'container',
    className,
  );
  return <div className={classes} {...props} />;
};

Container.propTypes = {
  fluid: PropTypes.bool.isRequired,
};

Container.defaultProps = {
  fluid: true,
};

export default Container;

While this doesn't:

import cx from 'classnames';
import * as PropTypes from 'prop-types';
import * as React from 'react';

import { CLASS_PREFIX } from '../_constants';

export interface ContainerProps extends React.HTMLProps<HTMLDivElement> {
  fluid: boolean;
}

const Container: React.FC<ContainerProps> & { defaultProps: Partial<ContainerProps> } = ({
  className,
  fluid,
  ...props
}) => {
  const classes = cx(
    CLASS_PREFIX + '-container px-5',
    fluid ? 'container-fluid' : 'container',
    className,
  );
  return <div className={classes} {...props} />;
};

Container.propTypes = {
  fluid: PropTypes.bool.isRequired,
};

Container.defaultProps = {
  fluid: true,
};

export default Container;

The type merging (not sure how it's called) is due to default props issue.

Though noticed simple function works with defaultProps:

import cx from 'classnames';
import * as PropTypes from 'prop-types';
import * as React from 'react';

import { CLASS_PREFIX } from '../_constants';

export interface ContainerProps extends React.HTMLProps<HTMLDivElement> {
  fluid: boolean;
}

function Container({ className, fluid, ...props }: ContainerProps) {
  const classes = cx(
    CLASS_PREFIX + '-container px-5',
    fluid ? 'container-fluid' : 'container',
    className,
  );
  return <div className={classes} {...props} />;
}

Container.propTypes = {
  fluid: PropTypes.bool.isRequired,
};

Container.defaultProps = {
  fluid: true,
};

export default Container;

Though not sure if function is the recommended way over React.FC as I just started using Typescript..