Cannot read property 'name' of undefined

[alphanumericone]

components.json

{
  "plugins": [
    {
      "name": "@zeplin/cli-connect-react-plugin"
    }
  ],
    "projects": [],
    "styleguides": [
        "5d35f79b90d2e34122ec81a1"
    ],
    "components": [
        {
            "path": "src/Button/button.component.js",
            "zeplinNames": [
                "Buttons / Primary / Text Only"
            ]
        }
    ]
}

button.component.js

// @flow
import React from 'react';
import MuiButton from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import type { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
import classnames from 'classnames';
import type { Theme } from '../types';

type AdditionalProps = {
  'data-e2e': string,
  color?: 'default' | 'inherit' | 'danger' | 'primary' | 'secondary',
};

export type ButtonProps = MuiButtonProps & AdditionalProps;

const ButtonComponent = ({
  classes: classesProp,
  color = 'default',
  disabled,
  size = 'medium',
  variant = 'contained',
  fullWidth,
  ...others
}: ButtonProps) => {
  const isDanger = color === 'danger';
  const {
    containedDanger: containedDangerClass,
    containedDangerDisabled: containedDangerDisabledClass,
    containedFullWidth: containedFullWidthClass,
    containedFullWidthDanger: containedFullWidthDangerClass,
    ...classes
  } = classesProp;

  return (
    <MuiButton
      classes={{
        ...classes,
        contained: classnames(classes.contained, {
          [containedDangerClass]: isDanger,
          [containedDangerDisabledClass]: isDanger && disabled,
          [containedFullWidthClass]: fullWidth && color === 'default',
          [containedFullWidthDangerClass]: fullWidth && isDanger,
        }),
      }}
      fullWidth={fullWidth}
      color={isDanger ? undefined : color}
      disabled={disabled}
      size={size}
      variant={variant}
      {...others}
    />
  );
};

const styles = (theme: Theme) => {
  return {
    root: {},
    label: {},
    contained: {
      // Contained by itself doesn't do anything, but along with danger it'll apply the color
      '&$containedDanger': {
        color: theme.palette.error.main,
      },
    },
    disabled: {},
    containedDanger: {},
    containedDangerDisabled: {
      opacity: 0.5,
    },
    // Adding a border and slight blue background to default color
    containedFullWidth: {
      backgroundColor: theme.colors.theme50,
      border: `1px solid ${theme.colors.neutral400}`,
    },
    // Adding a red border and slight red background to danger color
    containedFullWidthDanger: {
      backgroundColor: theme.colors.red50,
      border: `1px solid ${theme.palette.error.main}`,
    },
  };
};

export const Button = withStyles(styles)(ButtonComponent);

Button.dsuiName = 'Button';

Error:

Connecting components to Zeplin components failed.

    Error occurred while processing src/Button/button.component.js with @zeplin/cli-connect-react-plugin:

    C:\Users\me\AppData\Roaming\nvm\v12.10.0\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, it is fixed in v0.2.4. Note that only color and data-e2e parameter will be present in the code snippet since react-docgen can only these types from the component using ButtonProps. You should add other component parameters into ButtonProps to make them appear in the code snippet.