Can not parse function component

[koansang]

I using react-styleguidist. But fuctional component is can't parse.

my code:

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { sizeEnum } from '../../types/enum';
import styles from './Checkbox.module.scss';

/**
 * Design Guide Checkbox.
 */
function Checkbox(props) {
  const { id, name, value, label, size, checked, disabled, onChange } = props;
  const labelClass = classNames(styles.label, styles[size]);
  const inputClass = classNames(styles.input, styles[size]);

  return (
    <label className={labelClass} htmlFor={id}>
      <input
        type="checkbox"
        id={id}
        className={inputClass}
        name={name}
        value={value}
        checked={checked}
        disabled={disabled}
        onChange={onChange}
      />
      {label || value}
    </label>
  );
}

Checkbox.propTypes = {
  /** id */
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  /** input name */
  name: PropTypes.string.isRequired,
  /** input value */
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  /** label */
  label: PropTypes.string,
  /** size */
  size: PropTypes.oneOf([sizeEnum.large, sizeEnum.medium]),
  /** checked */
  checked: PropTypes.bool,
  /** disabled */
  disabled: PropTypes.bool,
  /** onChange */
  onChange: PropTypes.func,
};

Checkbox.defaultProps = {
  label: '',
  size: sizeEnum.medium,
  checked: false,
  disabled: false,
  onChange: () => null,
};

export default Checkbox;

display message:

Warning: Cannot parse src/app/components/Checkbox.jsx: RangeError: Maximum call stack size exceeded

class component is parsed well.

react-styleguidist version is 9.1.2

[fkling]

It seems to work fine on http://reactcommunity.org/react-docgen/ . Maybe styleguidist uses an older version?

[designdevy]

Hi i am having the same issue. Unable to extract propTypes from Class or Function Components. I get this error: ReferenceError: Unknown option: .0.

i compile the source code through babel and then I feed it to react-styleguidist

[designdevy]

My exported component looks like this

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

import { StyledButton } from './Button.styled';

const Button = ({ variant, type, children, ...rest }) => {
    return (
        <StyledButton variant={variant} type={type} {...rest}>
            {children}
        </StyledButton>
    );
};

Button.propTypes = {
    /** Button label */
    children: PropTypes.node,
    /** The variant of the button */
    variant: PropTypes.string,
    /** The type of the button */
    type: PropTypes.string
};

Button.defaultProps = {
    variant: 'solid',
    type: 'blue'
};

export default Button;

[nublikasa]

We're seeing this problem as well. Did anyone solved this problem? We can also provide additional information in order to help this problem.