No props returned when component exported only as default

[olee]

I'm using react-docgen-typescript as part of storybook in version 2.0.0 and have an issue with extraction of component props.

The following code returns no props:

import React from 'react';

export interface MyComponentProps {
    /**
     * The color of the component
     */
    color?: 'red' | 'green' | 'blue';
}

const MyComponent = (props: MyComponentProps) => <div />;

export default MyComponent;

However, as soon as I replace

const MyComponent = (props: MyComponentProps) => <div />;

with

export const MyComponent = (props: MyComponentProps) => <div />;

the props are correctly extracted (while still using the default export in my storybook story)

[pvasek]

In version 2.1.1 it should work or better to say, it should return the component with the name of the file. Can you try it? Does it work for you?

[TrevorBurnham]

I believe this is a special case of https://github.com/hipstersmoothie/react-docgen-typescript-plugin/issues/51: The downstream react-docgen-typescript-plugin relies on the displayName generated by react-docgen-typescript in order to generate the code, but the displayName generated in this case is derived from the filename, not from the component's identifier. So whenever the two don't match, react-docgen-typescript-plugin's generated code will be a no-op.

You can replicate the issue by adding a test case using the existing FunctionalComponentAsConstAsDefaultExport fixture:

it('correctly infers the displayName of a component defined with const and then exported as default', () => {
  const [parsed] = parse(
    fixturePath('FunctionalComponentAsConstAsDefaultExport')
  );
  assert.equal(parsed.displayName, 'Jumbotron'); // fails, file name is used as displayName instead
});

This is rather surprising, because the case where the component is exported with

export default React.memo(MyComponent)

is yields the identifier (MyComponent) as the displayName, yet the case where the component is simply exported with

export default MyComponent

yields the filename instead.

Sadly the downstream patch I proposed doesn't work for this case either, because expression.getName() just returns default for a default expression.

[github-actions[bot]]

There was no activity for a long time. The issue will be closed soon.

[github-actions[bot]]

Closing this issue as obsolete.