[Bug]: (Storybook v7) React autodocs incorrectly generating with TypeScript >= v5.1.3

[Francois-Esquire]

Describe the bug

Hi there, we're seeing a difference in API document generation of component props. HTML attributes are being added. See below. Is this a known issue?

Current:

Prior to TypeScript v5:

To Reproduce

Please see open PR below:

zendeskgarden/react-components#1554

and the staging deployment where we see the issue:

https://64ad6f40bf19b7052b7f32ba--zendeskgarden-react-components.netlify.app/?path=/docs/packages-accordions-accordion--docs

For the expected results, see:

https://zendeskgarden.github.io/react-components

System

No response

Additional context

No response

[shilman]

Thanks for reporting @Francois-Esquire ! We'll look into a fix for this.

In the meantime, if you'd like to experiment yourself, you can customize the typescript.reactDocgenTypescriptOptions.propFilter to log out the props and filter it out the intrinsiccs by hand. If you discover anything, please share here.

More info: https://storybook.js.org/docs/react/api/main-config-typescript#reactdocgentypescriptoptions

[Francois-Esquire]

Appreciate it @shilman! Going to give typescript.reactDocgenTypescriptOptions.propFilter a try and if I discover anything, will definitely loop back.

[Francois-Esquire]

Hi @shilman, took a deeper dive and narrowed it down to the declarations and parent properties on the docgen property object appear to be missing (thus not filtered by the default method) in later versions of typescript (after v5.0.4). For example, a docgen property object when working as expected:

{
  defaultValue: null,
  description: '',
  name: 'key',
  parent: {
    fileName: '<root>/node_modules/@types/react/index.d.ts',
    name: 'Attributes'
  },
  declarations: [
    {
      fileName: '<root>/node_modules/@types/react/index.d.ts',
      name: 'Attributes'
    }
  ],
  required: false,
  type: { name: 'Key | null | undefined' }
}

compared to:

{
  defaultValue: null,
  description: '',
  name: 'key',
  parent: undefined,
  declarations: [],
  required: false,
  type: { name: 'Key | null | undefined' }
}

Pulling on this thread further, it led me to react-docgen-typescript (see location in source), where the declarations are populated for each property. The thread appears to lead to typescript itself (ts.Symbol) has changed.

[valentinpalkovic]

@Francois-Esquire Thank you so much for the deep dive! Since the issue seems to be related to react-docgen-typescript, could you create an issue at react-docgen-typescript and link it to this one as a reference?

[Francois-Esquire]

@valentinpalkovic for sure 👍

[shilman]

Can you try out the following canary in your project and let me know whether it resolves any of your issues (or generates new ones)? We're looking to switch the default docgen from react-docgen-typescript to react-docgen, which is much faster and may also fix some long-standing bugs. Many thanks!

Note that the change is currently only for Vite projects Instructions in the "how to test" section: 👉 #23825