Uncaught SyntaxError: Invalid or unexpected token

[haldunanil]

trafficstars

I'm using the following setup:

• React + ReactDOM 16.6.0
• Typescript 3.1.3
• Storybook.js 4.0.0-alpha.23
• styled-components 4.0.2
• types/styled-components 4.0.2

When I attempt to render a component in Storybook, I get a SyntaxError that points me to this section, specifically the line that begins with "description":

"aria-autocomplete": {
          defaultValue: null,
          description: "Indicates whether inputting text could trigger display of one or more predictions of the user\'s intended value for an input and specifies how predictions would be
\npresented if they are made.",
          name: "aria-autocomplete",
          required: false,
          type: {
            name: "\"none\" | \"inline\" | \"list\" | \"both\""
          }
        },

where the description line appears to be cut off incorrectly. My setup looks like this:

export type sizes = "xs" | "sm" | "md" | "lg" | "xl";

export type textAlignments = "left" | "center" | "right" | "justify";
export type itemAlignments =
  | "baseline"
  | "start"
  | "center"
  | "stretch"
  | "end";
export type contentJustifications =
  | "start"
  | "end"
  | "center"
  | "around"
  | "between";

export type itemAlignmentObject = {
  align: itemAlignments;
  size: sizes;
};

export type justificationObject = {
  justify: contentJustifications;
  size: sizes;
};

interface FlexBaseProps {
  inlineFlex?: boolean | sizes;
  alignItems?: itemAlignments | itemAlignmentObject[];
  justifyContent?: contentJustifications | justificationObject[];
  textAlign?: textAlignments;
}

export const StyledFlex = styled.div<FlexBaseProps>`
...
`;

// actual flex component
const Flex: React.SFC<FlexProps> = (props: FlexProps) => (
  <StyledFlex {...props} data-ut="flex" />
);

Replacing the StyledFlex component inside Flex with something like <div {...props} data-ut="flex /> solves the issue, but is obviously not what I want to do. I'm not even sure this problem is specifically caused by the @types/styled-components package, but this seemed like a good place to start.

[strothj]

This is likely an issue with the code generation in this package. I won't be able to work on this issue for a couple weeks likely but for the time being you should be able to use the following setting:

skipPropsWithName

You can exclude that prop for now.