ArgsTable breaks if the component's displayName doesn't match its export name

Describe the bug If a story for a React component renders an ArgsTable block, and the component’s displayName doesn’t match its export name, then the ArgsTable will render this error instead of the component’s props:

No inputs found for this component.

To Reproduce https://github.com/TrevorBurnham/sb-displayname-breaks-argstable

System

Environment Info:

System: OS: macOS 11.4 CPU: (16) x64 Intel® Core™ i7-10700K CPU @ 3.80GHz Binaries: Node: 15.10.0 - ~/.volta/tools/image/node/15.10.0/bin/node Yarn: 2.4.2 - ~/.volta/tools/image/yarn/1.22.10/bin/yarn npm: 7.5.3 - ~/.volta/tools/image/node/15.10.0/bin/npm Browsers: Chrome: 91.0.4472.114 Firefox: 88.0.1 Safari: 14.1.1 npmPackages: @storybook/addon-actions: ^6.4.0-alpha.3 => 6.4.0-alpha.3 @storybook/addon-docs: ^6.4.0-alpha.3 => 6.4.0-alpha.3 @storybook/addon-essentials: ^6.4.0-alpha.3 => 6.4.0-alpha.3 @storybook/addon-links: ^6.4.0-alpha.3 => 6.4.0-alpha.3 @storybook/react: ^6.4.0-alpha.3 => 6.4.0-alpha.3

Additional context This issue doesn’t occur when the ArgsTable is created implicitly as part of the default DocsPage behavior. I’ve only been able to replicate it when rendering an ArgsTable directly using the docs.page parameter.

I was able to work around the issue in my project by forcing react-docgen-typescript to use the expression name as the component name:

// in .storybook/main.js
module.exports = {
  // ...
  typescript: {
    reactDocgenTypescriptOptions: {
      componentNameResolver: (expression) => {
        return expression.getName();
      },
    }
  }
}

However, this has the unwanted side effect of causing the expression name to be used instead of the displayName in example code as well.

[TrevorBurnham]

Update 12/5/2021: The problem lies in react-docgen-typescript-plugin, which relies on the component displayName returned by react-docgen-typescript as a proxy for its identifier (https://github.com/hipstersmoothie/react-docgen-typescript-plugin/issues/51). I’ve contributed a patch to react-docgen-typescript that allows the actual identifier to be accessed (https://github.com/styleguidist/react-docgen-typescript/pull/398), and that patch is in the react-docgen-typescript@2.2.1 release.

Unfortunately, react-docgen-typescript@2.2.1 requires typescript >= 4.3. So if react-docgen-typescript-plugin were updated to use it (draft PR: https://github.com/hipstersmoothie/react-docgen-typescript-plugin/pull/58), Storybook would also need to have that requirement.

[sarahquigley]

Is there any plan to fix this issue?