[Bug]: fast refresh is very slow when using react-docgen-typescript since v8.1.0

[cdelfabbro]

Describe the bug

Upgrading to storybook v8.1.0 and higher when having https://storybook.js.org/docs/api/main-config-typescript#reactdocgen set to react-docgen-typescript drastically increases the time of fast refresh (from a few milliseconds to several seconds, on an empty project).

Reproduction link

https://stackblitz.com/~/github.com/cdelfabbro/demo-issue-sb-docgen

Reproduction steps

1. Go to https://stackblitz.com/~/github.com/cdelfabbro/demo-issue-sb-docgen?file=src/stories/Button.stories.ts
2. Edit the label prop of the Primary story (line 21) then save.
3. Storybook will slowly refresh the preview (it takes about 2 seconds for me).
4. Go to https://stackblitz.com/~/github.com/cdelfabbro/demo-issue-sb-docgen?file=.storybook/main.ts.
5. Replace reactDocgen: "react-docgen-typescript" by reactDocgen: "react-docgen" (line 15) then save.
6. Restart the storybook process.
7. Retry step 2, storybook will quickly refresh the preview (it takes some milliseconds for me).

For the step 5: downgrade to storybook v8.0.10 will have the same result.

System

System:
    OS: Linux 5.0 undefined
    CPU: (5) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: 8.1.0 => 8.1.0 
    @storybook/addon-interactions: 8.1.0 => 8.1.0 
    @storybook/addon-links: 8.1.0 => 8.1.0 
    @storybook/react: 8.1.0 => 8.1.0 
    @storybook/react-vite: 8.1.0 => 8.1.0 
    @storybook/test: 8.1.0 => 8.1.0 
    storybook: 8.1.0 => 8.1.0

Additional context

No response

[shilman]

@valentinpalkovic any idea what's going on here?

[Barsnes]

I am having the same issue, and we are not able to work with react-docgen-typescript in local development.
The refresh time is around ~10 seconds at best, but usually around ~20 seconds for anything to update after a file has been saved.

Changing to using react-docgen fixes this, so we have gone for this as a solution for now:

typescript: {
  reactDocgen:
      env.NODE_ENV === 'production'
        ? 'react-docgen-typescript'
        : 'react-docgen',
}

[swag-overflow]

Any Update on that?

[UltimateGG]

Same issue, held me back from upgrading for a long time but I finally caved and looked into it more.

The ts docgen dependency, @joshwooding/vite-plugin-react-docgen-typescript on version 0.3.0 is great and fast, but just bumping to 0.3.1 breaks and is super slow again. I checked this by manually downgrading it in my package-lock.json

This checks out because in storybook 8.1.0 changelog:

Dependencies: Upgrade @joshwooding/vite-plugin-react-docgen-typescript to 0.3.1

and the commit for the docgen plugin was dealing with HMR issues.

Edit:
Looking into that dependency, in 0.3.0 it wasn't even doing docgen on hot reload, only on initial startup. That's why it was so fast. There has got to be a way to cache or speed that up right?

The developer experience for 10s+ reload times is not workable and your options are to:

1. Lose all the comments and descriptions in storybook docs by not using Typescript docgen
2. Duplicate all of the docs/comments into storybook args table
3. Only use ts-docgen in production build and have a different doc for development vs production build

[UltimateGG]

I have found by default it is including all node_modules *.tsx files (Not respecting storybook's stories) so I have gained some performance (~5s down to 2s) by setting include property:

typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      include: ['src/**/*.{ts,tsx}']
    }
}

[viveleroi]

I can confirm this is happening for us as well. Storybook v7 would reload so quickly it was never a problem, so it was definitely sub-one second. Now on v8 it takes between 10-20 seconds for changes to reload properly. It's absolutely unusable. We have to switch to react-docgen during dev just so storybook reloads properly.

Storybook 8.2.9
Vite 5.3.1
Node 21.5
Windows 10

[viveleroi]

This is definitely related to @joshwooding/vite-plugin-react-docgen-typescript. v8.0.10 of storybook uses v0.3.0 and later versions use 0.3.1. When I force v0.3.0 of that transitive dep, fast refresh works incredibly quickly in storybook v8.3.2.

joshwooding/vite-plugin-react-docgen-typescript#37