Skip to content

Invalid JS generated under a certain TS export. Uses default reserved word #57

@rally25rs

Description

@rally25rs

Given the file test.tsx

import React from 'react';

export class Column extends React.Component {}

export default function Test() {
  return <span>hi</span>;
}
Test.Column = Column;

I get invalid generated code:

try {
    // @ts-ignore
    default.Column.displayName = "default.Column";
    // @ts-ignore
    default.Column.__docgenInfo = { "description": "", "displayName": "default.Column", "props": {} };
    // @ts-ignore
    if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
        // @ts-ignore
        STORYBOOK_REACT_CLASSES["components/virtualized-table/test.tsx#default.Column"] = { docgenInfo: default.Column.__docgenInfo, name: "default.Column", path: "components/virtualized-table/test.tsx#default.Column" };
}

It is for some reason using default.Column but default is a JS reserved word, so this results in a syntax error Uncaught SyntaxError: expected expression, got keyword 'default'


I can fix this by changing my TS to:

import React from 'react';

export class Column extends React.Component {}

function Test() {
  return <span>hi</span>;
}
Test.Column = Column;

export default Test;

It seems like the order of the export matters in relation to the Test.Column = Column assignment 😕


Versions:

└─ @storybook/react@6.3.12
└─ @storybook/react-docgen-typescript-plugin@1.0.2-canary.253f8c1.0
└─ react-docgen-typescript@2.1.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions