[Bug]: Storybook hangs or crashes with react-docgen-typescript when encountering syntax errors

[tmeindle]

Version

Windows 11 and 10
Node 18 and 20

Details

When using rsbuild storybook plugin with react-docgen-typescript option, and storybook dev running with hot reloading, if you create a syntax error in a file and save then save react-docgen-typescript reports an unresolved promise error in the babel parser. After which, storybook either hangs (on my windows 10 machine with node 18) or crashes (on my windows 11 machine with node 20 and microsoft rush monorepo).

the regular react-docgen works for me albeit very slowly and not it is not as accurate as the react-docgen-typescript package

Reproduce link

https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/react-18

Reproduce Steps

using the storybook-rsbuild repo.

1. install/use node 18 and pnpm 19
2. Clone fresh repo and go to repo's root folder
3. run code .
4. run pnpm i
5. run pnpm dev
6. navigate to sandboxes/react-18
7. open code .
8. in terminal run pnpm storybook
9. open src/stories/Button.tsx, then introduce a syntax error, then save
10. storybook hangs and/or crashes

start   Building...
Unhandled promise rejection: SyntaxError: C:\Users\Tim\Desktop\code\storybook-rsbuild\sandboxes\react-18\src\stories\Button.tsx: Unterminated regular expression. (1:1)

> 1 | /this is a syntax error
    |  ^
  2 | import React from 'react'
  3 | import './button.css' 
  4 |
    at constructor (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:362:19)
    at TypeScriptParserMixin.raise (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:3260:19)
    at TypeScriptParserMixin.readRegexp (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:2989:20)
    at TypeScriptParserMixin.parseExprAtom (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:10831:16)
    at TypeScriptParserMixin.parseExprAtom (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:6815:20)
    at TypeScriptParserMixin.parseExprSubscripts (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:10584:23)
    at TypeScriptParserMixin.parseUpdate (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:10569:21)
    at TypeScriptParserMixin.parseMaybeUnary (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:10549:23)
    at TypeScriptParserMixin.parseMaybeUnary (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:9477:18)
    at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:10403:61)
    at TypeScriptParserMixin.parseExprOps (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:10408:23)
    at TypeScriptParserMixin.parseMaybeConditional (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:10385:23)
    at TypeScriptParserMixin.parseMaybeAssign (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:10348:21)
    at TypeScriptParserMixin.parseMaybeAssign (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:9426:20)
    at TypeScriptParserMixin.parseExpressionBase (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:10302:23)
    at C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:10298:39
    at TypeScriptParserMixin.allowInAnd (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:11928:16)
    at TypeScriptParserMixin.parseExpression (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:10298:17)
    at TypeScriptParserMixin.parseStatementContent (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12372:23)
    at TypeScriptParserMixin.parseStatementContent (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:9151:18)
    at TypeScriptParserMixin.parseStatementLike (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12239:17)
    at TypeScriptParserMixin.parseModuleItem (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12216:17)
    at TypeScriptParserMixin.parseBlockOrModuleBlockBody (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12792:36)
    at TypeScriptParserMixin.parseBlockBody (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12785:10)
    at TypeScriptParserMixin.parseProgram (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12113:10)
    at TypeScriptParserMixin.parseTopLevel (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12103:25)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]@7.25.6\node_modules\@babel\parser\lib\index.js:12103:25)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13915:10)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:9766:18)
    at parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13928:26)
    at parser (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@[email protected]\node_modules\@babel\parser\lib\index.js:12103:25)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13915:10)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:9766:18)
    at parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13928:26)
[email protected]\node_modules\@babel\parser\lib\index.js:12103:25)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13915:10)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:9766:18)
    at parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@[email protected]\node_modules\@babel\parser\lib\index.js:12103:25)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13915:10)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:9766:18)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13915:10)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:9766:18)
5.6\node_modules\@babel\parser\lib\index.js:13915:10)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:9766:18)
    at TypeScriptParserMixin.parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:9766:18)
5.6\node_modules\@babel\parser\lib\index.js:9766:18)
    at parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babe    at parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13928:26)
    at parser (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\core\lib\parser\index.js:41:34)
    at parser.next (<anonymous>)
    at parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\    at parser (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\core\lib\parser\index.js:41:34)
    at parser.next (<anonymous>)
    at parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\\core\lib\parser\index.js:41:34)
    at parser.next (<anonymous>)
    at parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\    at parser.next (<anonymous>)
    at parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\    at parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\core\lib\parse.js:25:37)
    at parse.next (<anonymous>)
    at evaluateSync (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\[email protected]\node_modules\gensync\index.js:251:28)
    at sync (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\[email protected]\node_modules\gensync\index.js:89:14)
    at stopHiding - secret - don't use this - v1 (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\core\lib\errors\rewrite-stack-trace.js:47:12)
    at parseSync (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]\node_modules\@babel\core\lib\parse.js:40:72)
    at babelParser (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\[email protected]\node_modules\react-docgen\dist\babelParser.js:78:41)
    at parse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\[email protected]\node_modules\react-docgen\dist\parse.js:51:46)
    at defaultParse (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\[email protected]\node_modules\react-docgen\dist\main.js:55:35)
    at C:\Users\Tim\Desktop\code\storybook-rsbuild\packages\framework-react\dist\preset.js:177:66
    at Object.transformLoader_rslib_entry_transform (file:///C:/Users/Tim/Desktop/code/storybook-rsbuild/node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/transformLoader.mjs:7:24)
    at LOADER_EXECUTION (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\index.js:6104:18)
    at runSyncOrAsync2 (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\index.js:6105:6)
    at node:internal/util:441:7
    at new Promise (<anonymous>)
    at runSyncOrAsync2 (node:internal/util:427:12)
    at runLoaders (C:\Users\Tim\Desktop\code\storybook-rsbuild\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\index.js:6585:56) {
  code: 'BABEL_PARSE_ERROR',
  reasonCode: 'UnterminatedRegExp',
  loc: Position { line: 1, column: 1, index: 1 },
  pos: 1,
  syntaxPlugin: undefined
}
error   Compile error: 
Failed to compile, check the errors for troubleshooting.
File: C:\Users\Tim\Desktop\code\storybook-rsbuild\sandboxes\react-18\src\stories\Button.tsx:1:1
  × Module build failed:
  ╰─▶   × Error: channel closed
        │

 @ ./src/stories/Button.stories.ts
 @ C:\Users\Tim\Desktop\code\storybook-rsbuild\sandboxes\react-18\src|lazy|/^\.\/.*$/|include: /(?!.*node_modules)(?:[\\/]src(?:[\\/](?!\.)(?:(?:(?!(?:^|[\\/])\.).)*?)[\\/]|[\\/]|$)(?!\.)(?=.)[^\\/]*?\.stories\.(js|jsx|mjs|ts|tsx))$/|chunkName: [request]|groupOptions: {}|strict namespace object
 @ ./node_modules/.cache/storybook/storybook-rsbuild-builder/storybook-stories.js
 @ ./node_modules/.cache/storybook/storybook-rsbuild-builder/storybook-config-entry.js

[fi3ework]

Similar to #198.