Error with connecting React Typescript component. Unexpected reserved word 'interface'

[GuptaSiddhant]

I'm getting the error "Unexpected reserved word 'interface'".

I'm using

• React 16.13,
• Typescript 3.7.4
• Zeplin CLI - 1.0.0

Error

Zeplin CLI - v1.0.0

Connecting components to Zeplin components failed.

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

    /Users/gs/git/fa-harmony/src/components/Button/index.tsx: Unexpected reserved word 'interface' (15:0)

      13 | import * as Util from './util';
      14 | 
    > 15 | interface FAButtonProps {
         | ^
      16 |   /**
      17 |    * Spacing of the button - Reduce or increase spacing
      18 |    * @default 'md (medium)'

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

.zeplin/components.json

{
  "projects": [],
  "styleguides": ["..."],
  "components": [
    {
      "name": "Button",
      "path": "src/components/Button/index.tsx",
      "zeplinNames": ["Light/Button/NoIcon/contained/md/Default"]
    }
  ],
  "plugins": [
    {
      "name": "@zeplin/cli-connect-react-plugin"
    }
  ]
}

Button/index.tsx

import React from 'react';
import { Icon, FAIconProps } from '../Icon';
import { Text, FATextProps } from '../Text';
import { Tooltip } from '../Tooltip';
import { TintType, SMLtype } from '../../theme';
import { faSpinner } from '@fortawesome/pro-light-svg-icons';
import * as Util from './util';

interface FAButtonProps {
  /**
   * Spacing of the button - Reduce or increase spacing
   * @default 'md (medium)'
   */
  spacing?: SMLtype;
  /**
   * A loading indicator can be added to a button and it is made inactive
   * @default false
   */
  isLoading?: boolean;
  /**
   * Button is made inactive
   * @default false
   */
  disabled?: boolean;
  /**
   * Color style of Button
   * @default 'default'
   */
  tint?: TintType;
  /**
   * Option to fit button width to its parent width (One button per line)
   * @default false
   */
  fullWidth?: boolean;
  /**
   * Kind of Button
   * @default 'contained'
   */
  variant?: 'contained' | 'outline' | 'borderless' | 'link';
  /**
   * Display icon before the text - FontAwesome Icon object (needs to be imported) 
   * `import { faBell } from "@fortawesome/pro-light-svg-icons";` <br/>
   * see: Icon component for more information
   */
  icon?: FAIconProps['name'];
  /**
   * Button's Text value
   */
  label?: string;
  /**
   * Show tooltip over button with this value. Recommended with IconOnly.
   */
  tooltip?: string;
  /**
   * Function executed on the button click
   */
  onClick?: (e: any) => void;
  /**
   * Only show icon and hide text
   * @default false
   */
  iconOnly?: boolean;
  /**
   * Type of Button
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
   * @default button
   */
  type?: 'submit' | 'reset' | 'button';
  shadow?: boolean;
  textVariant?: FATextProps['variant'];
}

export const Button = ({ iconOnly, icon, tooltip, ...props }: FAButtonProps) => {
   return ...
}

[yuqu]

Hi @GuptaSiddhant,

It looks very strange. I could not reproduce the issue, even using the component you shared.

Do you have a babel configuration file on your project root directory (or anywhere else) ? If so, could you share it? I think it is picked up by react-docgen and that is what brings up the issue.

[GuptaSiddhant]

module.exports = {
  presets: [
    [
      '@babel/env',
      {
        modules: false,
        useBuiltIns: 'usage',
        corejs: '2',
      },
    ],
    '@babel/react',
  ],
};

[GuptaSiddhant]

Solved the problem with version update. Thanks.

[yuqu]

Great to hear that! 🎉