reactjs / reactjs/react-docgen

Can not parse function component

Open
#370 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs-more-info
Dominant language
TypeScript
Stars
3.8k
Forks
316
Avg merge
5h 7m
Merged PRs (30d)
4

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the failure with the JSX example reported as src/app/components/Checkbox.jsx using react-styleguidist 9.1.2. No test or parser file is named in the report; done means the functional component parses without a RangeError while class components continue to parse correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.