[Bug]: Storybook Build hangs with addon-coverage + reactDocgen=react-docgen-typescript (+ ???) (reproduced in small project)

[LumaKernel]

Describe the bug

storybook build is finishing but it hangs and never exits somehow.

Keywords: halts, halting, stops, stuck

Reproduction link

https://github.com/LumaKernel/storybook-hang-issue

Reproduction steps

1. Clone https://github.com/LumaKernel/storybook-hang-issue
2. corepack npm ci
3. corepack npm run build:storybook

It hangs.

Screen.Recording.2025-01-30.at.19.11.41.mov

System

Storybook Environment Info:

  System:
    OS: macOS 14.7.1
    CPU: (8) arm64 Apple M1 Pro
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 22.5.1 - /usr/local/bin/node
    npm: 10.8.2 - /usr/local/bin/npm <----- active
  Browsers:
    Safari: 18.1
  npmPackages:
    @storybook/addon-coverage: ^1.0.5 => 1.0.5
    @storybook/react-vite: ^8.5.2 => 8.5.2
    @storybook/test-runner: ^0.21.0 => 0.21.0
    @storybook/testing-library: ^0.2.2 => 0.2.2
    storybook: ^8.5.2 => 8.5.2

Additional context

Possibly related:

• [Bug]: Storybook angular hangs and doesn't exit after build is successfully complete #24320
• [Bug]: Build hangs at "Output directory" #22985
• [Bug]: Storybook hangs/doesn't finish building 8.4.6/8.4.7 #29828

Confirmed:

• If dropping addon-coverage, it resolved.
• If dropping reactDocgen=react-docgen-typescript, it resolved.
• If moving the .storybook/main.ts to plain npm create vite'd project, it doesn't hang. That's why I'm writing + ??? in the title.

Credits: The reproduction is made by minimizing the real work of Optimind.

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This appears to be a process termination issue when using addon-coverage with react-docgen-typescript. The hang occurs because the coverage instrumentation process isn't being properly terminated. Key changes needed: 1. In @storybook/addon-coverage, modify the coverage instrumentation to ensure cleanup: js // Add process cleanup in addon-coverage's instrumenter process.on('exit', () => { // Cleanup coverage instrumentation global.__coverage__ = undefined; }); 2. Add force exit to the build process in your project: js // .storybook/main.ts export default { viteFinal: async (config) => { // Force process exit after build if (process.env.NODE_ENV === 'production') { process.on('exit', () => process.exit(0)); } return config; } }; This is likely related to the coverage instrumentation process remaining active after the build completes.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

[ryanseddon]

Interesting, we are also having the hanging issue and disabling reactDocgen=react-docgen-typescript as you mentioned above also stops the process from hanging

[ryanseddon]

Ok so I found this while searching in the storybook codebase:

storybook/code/lib/cli-storybook/src/automigrate/fixes/react-docgen.ts

Lines 49 to 54 in ba47d3e

	return dedent`
	Since Storybook 8.0, ${picocolors.cyan(
	'react-docgen'
	)} is now the default for generating component controls, replacing ${picocolors.cyan(
	'react-docgen-typescript'
	)}.

This never gets logged out even though we were using react-docgen-typescript with storybook v8? But doing react-docgen in our storybook config

 typescript: {
    reactDocgen: 'react-docgen'
    //...
}

We get the process running and exiting as expected.

But that doesn't explain it on your reproduction repo, so I pulled that down and had a look through the node_modules and could see react-docgen-typescript is pulled down too.

Running npm explain:

npm explain react-docgen-typescript
[email protected] dev
node_modules/react-docgen-typescript
  react-docgen-typescript@"^2.2.2" from @joshwooding/[email protected]
  node_modules/@joshwooding/vite-plugin-react-docgen-typescript
    @joshwooding/vite-plugin-react-docgen-typescript@"0.4.2" from @storybook/[email protected]
    node_modules/@storybook/react-vite
      dev @storybook/react-vite@"^8.5.2" from the root project

Looking at the preset.js file in @storybook/react-vite I can see this block of code

if (reactDocgenOption === "react-docgen-typescript" && typescriptPresent && plugins.push(require("@joshwooding/vite-plugin-react-docgen-typescript")({
        ...reactDocgenTypescriptOptions,
        savePropValueAsString: !0
    })), typeof reactDocgenOption == "string") {
    let {
        reactDocgen: reactDocgen2
    } = await Promise.resolve().then(() => (init_react_docgen(), react_docgen_exports));
    plugins.unshift(await reactDocgen2({
        include: reactDocgenOption === "react-docgen" ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/
    }))
}

Remove that block of code from the react-vite presets file and your reproduction builds correctly without hanging.

So maybe the fix needs to happen in @storybook/react-vite with how this code block is checking for the existence of react-docgen-typescript?

[ryanseddon]

I think I've found the cause it seems the startWatch method in the plugin was never closed as it was relying on the rollup hook closeBundle to be called to stop the watch process which would make this hang.

I did patch in the buildEnd hook to close the watch and that does fix it but it seems the above linked module had a release in the last couple days that has put the watch under an experimental flag that you need to opt in.

So the fix for this is @storybook/react-vite to upgrade @joshwooding/[email protected]

In the meantime I just added an override to the reproduction repo to force v0.5.0

"overrides": {
  "@joshwooding/vite-plugin-react-docgen-typescript": "0.5.0"
}