Connecting components to Zeplin components failed.

[johnrackles]

When I try to connect a TypeScript Button to my project, I get the following error message.

zeplin connect

Zeplin CLI - v1.0.0


Connecting components to Zeplin components failed.

    Error occurred while processing components/Button/Button.tsx with @zeplin/cli-connect-react-plugin:

    /Users/johannes.rackles/.nvm/versions/node/v10.15.1/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

Please check ~/.zeplin/cli.log for details.

I am unable to find out what this might mean. The component in question:

import * as React from 'react'
import Link from 'next/link'

import isExternalLink from '../../lib/isExternalLink'
import Wrapper from './components/ButtonWrapper'
import Icon from './components/ArrowIcon'

type Props = {
  icon?: boolean
  inverted?: boolean
  onClick?: () => unknown
  to?: string
  tracking?: string
  href?: string
}

const Button: React.FC<Props> = ({ children, icon = false, inverted = false, onClick, to, tracking }) => {
  if (to && isExternalLink(to)) {
    return (
      <Wrapper as="a" icon={icon ? 'true' : 'false'} id={tracking} inverted={inverted ? 'true' : 'false'} href={to}>
        {children} {icon ? <Icon /> : null}
      </Wrapper>
    )
  }

  return to && to.length ? (
    <Link href={to}>
      <Wrapper
        icon={icon ? 'true' : 'false'}
        id={tracking}
        inverted={inverted ? 'true' : 'false'}
        onClick={onClick}
      >
        {children} {icon ? <Icon /> : null}
      </Wrapper>
    </Link>
  ) : (
    <Wrapper
      icon={icon ? 'true' : 'false'}
      id={tracking}
      inverted={inverted ? 'true' : 'false'}
      onClick={onClick}
    >
      {children} {icon ? <Icon /> : null}
    </Wrapper>
  )
}

export default Button

[yuqu]

Hi John,

It seems react-docgen cannot infer types of your component props. There is an open issue for that: reactjs/react-docgen#387

We will publish a new release as soon as it is fixed on react-docgen, until then, there is a workaround for the problem. You can provide type info in the function parameters like below.

...
const Button: React.FC<Props> = (
   { children, icon = false, inverted = false, onClick, to, tracking }: Props
) => {
...

Could you try it and see if that works for you?

[johnrackles]

Yes this works. Thanks for the quick reply