Error trying to connect to typescript react component

[phil-armstrong]

Hi,

I was playing around with the new component features and got the following error from 'zeplin connect --dev'

My react component is written in react and has a couple of props that are optional (i.e. color?: string) so I think it's probably related to that but not too sure.

Thanks

`Connecting components to Zeplin components failed.

Error occurred while processing src/elements/icon/icon.component.tsx with @zeplin/cli-connect-react-plugin:

/home/phil/.nvm/versions/node/v8.9.4/lib/node_modules/@zeplin/cli-connect-react-plugin/dist/template/base.pug:18
    16| 
    17| mixin propType(name, propType)
  > 18|     if propType.name === "union"
    19|         |   #{name}={union[
    20|         +propertyValues(propType.value)
    21|         | }]

Cannot read property 'name' of undefined

`

[yuqu]

Hi Phil,

How is your React components are composed? There was another related issue here, the culprit was functional components. #10

Could you check it out if the solution I mentioned there works for you? If not, could you share a sample (anonymized if required) of your failed components?

[phil-armstrong]

Hi, the code is below.

Originally the top line was
export const Icon: React.FC = ({ icon, size = '1em', color }) => {
but I changed to below after looking at that other issue but I still get the same error.

typescript: 3.7.2
react: 16.8.6

We also use styled-components a lot so don't know if they are contributing to the problem

`
export const Icon: React.FC = ({ icon, size = '1em', color }: IconProps) => {
const [viewBox, setViewbox] = useState();
const [path, setPath] = useState();

useEffect(
    () => {
        const iconDetails = iconSet.icons.filter(filteredIcon => filteredIcon.properties.name === icon)[0].icon;
        setViewbox('0 0 1024 1024');
        setPath(iconDetails.paths[0]);
    },
    [icon]
);

return <IconSvg
    width={size}
    height={size}
    color={color}
    viewBox={viewBox}
>
    <path d={path} />
</IconSvg>;

};
`

[jgarplind]

@phil-armstrong where are you getting your types from?

I had the same issue with my component, the solution was to put the type definition in the same file.

import * as React from 'react'
import classnames from 'classnames'

import s from './Button.module.scss'
- import { IButtonType } from './Button.types'
+ export interface IButtonType {
+  onClick?: any
+  onMouseEnter?: any
+  onMouseLeave?: any
+  children: any
+  primary?: boolean
+  secondary?: boolean
+  tertiary?: boolean
+  icon?: boolean
+  attributes?: {}
+  large?: boolean
+  customClass?: string
+  testSelector?: string
+  name?: string
+  submitType?: boolean
+  disabled?: boolean
+ }

const Button = ({
  attributes = {},
  children,
  customClass,
  disabled,
  icon,
  large = false,
  name,
  onClick,
  onMouseEnter,
  onMouseLeave,
  primary,
  secondary,
  submitType,
  tertiary,
  testSelector,
}: IButtonType) => (
  <button
    className={classnames(
      {
        [s.Primary]: primary,
        [s.Secondary]: secondary,
        [s.Tertiary]: tertiary,
        [s.Icon]: icon,
        [s.Large]: large,
        [s.Disabled]: disabled,
      },
      customClass
    )}
    disabled={disabled}
    data-testid={testSelector}
    onClick={onClick}
    onMouseEnter={onMouseEnter}
    onMouseLeave={onMouseLeave}
    name={name}
    type={submitType ? 'submit' : 'button'}
    {...attributes}
  >
    {children}
  </button>
)

export default Button

However, I don't think it's great that same file typing is enforced, but I suppose that's an issue with react-docgen not being able to resolve imports rather than this plugin in particular.

[phil-armstrong]

@jgarplind that appears to be the problem yes, moving the props into the same folder seems to have fixed the issue.

Is there any suggestion from react-docgen that this issue will be fixed in the future?

Edit: I had a look at react-docgen and they have had this pull request for a while but are still actively commenting on it, not sure if it'll be merged

reactjs/react-docgen#352

[yuqu]

Yes Phil, I am also waiting for that PR to be merged 😅 We may create hack build or a custom resolver built on the PR but comments mention some stability issues, it is best to wait a bit more.

[yuqu]

Closing as it won't be fixed as part of this repository.

Waiting reactjs/react-docgen#352 to be merged.

[yuqu]

You can now set an option to use react-docgen-typescript for TS files. It will handle imported props.