[Bug]: react-docgen-typescript not working after v8.4.6

[fertolg]

Describe the bug

After v8.4.6, using react-docgen-typescript as the argTypes inferrer fails to pick up arguments and JSDoc comments entirely.

Reproduction link

https://github.com/fertolg/storybook-8_4_6-react-docgen-typescript-bug

Reproduction steps

1. Clone the repo
2. Run pnpm storybook
3. Notice how the default example stories are missing type inference (size property is missing for example) and the JSDocs comments are not being rendered in the documentation either.

System

Storybook Environment Info:

  System:
    OS: macOS 14.7.1
    CPU: (11) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 9.10.0 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 131.0.6778.109
    Safari: 18.1.1
  npmPackages:
    @storybook/addon-essentials: 8.4.6 => 8.4.6 
    @storybook/addon-interactions: 8.4.6 => 8.4.6 
    @storybook/addon-onboarding: 8.4.6 => 8.4.6 
    @storybook/blocks: 8.4.6 => 8.4.6 
    @storybook/react: 8.4.6 => 8.4.6 
    @storybook/react-vite: 8.4.6 => 8.4.6 
    @storybook/test: 8.4.6 => 8.4.6 
    eslint-plugin-storybook: ^0.11.1 => 0.11.1 
    storybook: 8.4.6 => 8.4.6

Additional context

You don't have to clone the repo I provided, you can also:

1. Initialize a brand new project in an empty directory with pnpm dlx storybook@latest init
2. Choose React + Vite
3. After initialization, update .storybook/main.ts to use react-docgen-typescript.
4. Run storybook and see the result.

[yannbf]

I can confirm the bug from the repro, seems to have started in docgen-typescript v0.4.1:
https://github.com/joshwooding/vite-plugin-react-docgen-typescript/releases/tag/%40joshwooding%2Fvite-plugin-react-docgen-typescript%400.4.1

If I use pnpm overrides to change the dependency back to 0.4.0, it behaves correctly.

@joshwooding do you have any clue what could be happening here?

[yannbf]

@fertolg I found out what is going on.

Since 0.4.1 of the @joshwooding/vite-plugin-react-docgen-typescript package, it stopped searching for files via glob and started to rely on TypeScript to do that. So that depends on the tsconfig file. In your project, you have a tsconfig file which includes no files, but references to other tsconfig files which do include files:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

however, internally, seems like the docgen plugin does not support this referencing of tsconfig files, so then it actually searches for nothing, as stated in your tsconfig.json file. As a solution, you can pass the path to the correct tsconfig file as an option in your main.js:

import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
  // ...
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      tsconfigPath: './tsconfig.app.json', // 👈 This solves your problem.
    },
  },
}
export default config

[fertolg]

I see, thank you @yannbf for looking into this. I'd like to call out this is how Vite 6 scaffolds a project out of the box (with 2 separate tsconfig files) so I think anyone starting a new Vite-based project is going to run into this. I'd recommend calling this out in the documentation somewhere, maybe within the Typescript troubleshooting section.

[yannbf]

Definitely! I wanted to give you a path forward so you're not blocked, but we will definitely see what we can do about this, also with the maintainers of the docgen library. Thanks!