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
Given the file
test.tsxI get invalid generated code:
It is for some reason using
default.Columnbutdefaultis a JS reserved word, so this results in a syntax errorUncaught SyntaxError: expected expression, got keyword 'default'I can fix this by changing my TS to:
It seems like the order of the
exportmatters in relation to theTest.Column = Columnassignment 😕Versions:
└─ @storybook/react@6.3.12
└─ @storybook/react-docgen-typescript-plugin@1.0.2-canary.253f8c1.0
└─ react-docgen-typescript@2.1.1