search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.69k stars 9.32k forks source link

[Bug]: react-docgen-plugin is failing Storybook at build time #29378

Open cdedreuille opened 1 month ago

cdedreuille commented 1 month ago

Describe the bug

We are trying to move from Storybook 6 to 8. Everything is working fine except for a single story that make Storybook build fail. Here's the output:

yarn build-storybook
@storybook/core v8.3.5

info => Cleaning outputDir: dist
info => Loading presets
info => Building manager..
info => Manager built (92 ms)
info => Building preview..
WARN No story files found for the specified pattern: ../plugins/search/src/**/*.mdx
WARN No story files found for the specified pattern: ../packages/app/src/**/*.mdx
WARN No story files found for the specified pattern: ../plugins/search-react/src/**/*.mdx
WARN No story files found for the specified pattern: ../plugins/org/src/**/*.mdx
WARN No story files found for the specified pattern: ../plugins/home/src/**/*.mdx
WARN No story files found for the specified pattern: ../plugins/catalog-react/src/**/*.mdx
WARN No story files found for the specified pattern: ../packages/core-components/src/**/*.mdx
info Using tsconfig paths for react-docgen
vite v5.4.9 building for production...
...
✓ 5132 modules transformed.
x Build failed in 9.19s
=> Failed to build the preview
[storybook:react-docgen-plugin] Argument must be Identifier, Literal, QualifiedTypeIdentifier or TSQualifiedName. Received 'PrivateName'
file: /Users/cdedreuille/Sites/backstage/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx
    at getNameOrValue (./node_modules/react-docgen/dist/utils/getNameOrValue.js:48:9)
    at Object.enter (./node_modules/react-docgen/dist/utils/getMemberExpressionValuePath.js:83:137)
    at NodePath._call (./node_modules/@babel/traverse/lib/path/context.js:49:20)
    at NodePath.call (./node_modules/@babel/traverse/lib/path/context.js:39:18)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:88:31)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitSingle (./node_modules/@babel/traverse/lib/context.js:66:19)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:113:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitMultiple (./node_modules/@babel/traverse/lib/context.js:62:17)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:111:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitSingle (./node_modules/@babel/traverse/lib/context.js:66:19)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:113:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitMultiple (./node_modules/@babel/traverse/lib/context.js:62:17)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:111:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitSingle (./node_modules/@babel/traverse/lib/context.js:66:19)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:113:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitMultiple (./node_modules/@babel/traverse/lib/context.js:62:17)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:111:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitSingle (./node_modules/@babel/traverse/lib/context.js:66:19)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:113:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at traverse (./node_modules/@babel/traverse/lib/index.js:53:34)
    at FileState.traverse (./node_modules/react-docgen/dist/FileState.js:107:5)
    at getMemberExpressionValuePath (./node_modules/react-docgen/dist/utils/getMemberExpressionValuePath.js:100:31)
    at getMemberValuePath (./node_modules/react-docgen/dist/utils/getMemberValuePath.js:95:62)
    at ./node_modules/react-docgen/dist/handlers/propTypeHandler.js:81:63
    at ./node_modules/react-docgen/dist/parse.js:44:35
    at Array.forEach (<anonymous>)
    at ./node_modules/react-docgen/dist/parse.js:44:14
    at Array.map (<anonymous>)
    at executeHandlers (./node_modules/react-docgen/dist/parse.js:42:31)
    at parse (./node_modules/react-docgen/dist/parse.js:61:10)
transforming (5172) ../node_modules/lodash/_baseIndexOfWith.js%

For context, here's the actual lines that make it fail: https://github.com/backstage/backstage/blob/bca0b2df4308ce2a07f23df064e5db6f90742712/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx#L73-L75

Reproduction link

https://github.com/backstage/backstage/tree/storybook8

Reproduction steps

  1. Pull Backstage locally using the storybook8 branch
  2. Install with yarn at the root of the repo
  3. Go to /storybook and install with yarn
  4. Run yarn build-storybook

System

System: OS: macOS 15.0.1 CPU: (10) arm64 Apple M1 Max Shell: 5.9 - /bin/zsh Binaries: Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node Yarn: 3.8.1 - /opt/homebrew/bin/yarn npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm <----- active Browsers: Chrome: 129.0.6668.101 Safari: 18.0.1 npmPackages: @storybook/addon-essentials: ^8.3.5 => 8.3.5 @storybook/addon-interactions: ^8.3.5 => 8.3.5 @storybook/addon-links: ^8.3.5 => 8.3.5 @storybook/addon-onboarding: ^8.3.5 => 8.3.5 @storybook/blocks: ^8.3.5 => 8.3.5 @storybook/react: ^8.3.5 => 8.3.5 @storybook/react-vite: ^8.3.5 => 8.3.5 @storybook/test: ^8.3.5 => 8.3.5 eslint-plugin-storybook: ^0.9.0 => 0.9.0 storybook: ^8.3.5 => 8.3.5 storybook-dark-mode: ^4.0.2 => 4.0.2

Additional context

No response

shilman commented 1 month ago

@cdedreuille does using react-docgen-typescript fix the issue?

https://storybook.js.org/docs/configure/integration/typescript

robotkutya commented 4 days ago

@shilman thanks, that solved it for me

rexxars commented 3 days ago

I am having the same issue and cannot get this to work even with react-docgen-typescript in the config.

I am seeing react-docgen in the stack - is this expected?

[storybook:react-docgen-plugin] Argument must be Identifier, Literal, QualifiedTypeIdentifier or TSQualifiedName. Received 'PrivateName'
file: ~/packages/core/dist/index.js
    at getNameOrValue (~/node_modules/.pnpm/react-docgen@7.1.0/node_modules/react-docgen/dist/utils/getNameOrValue.js:24:11)
    at Object.enter (~/node_modules/.pnpm/react-docgen@7.1.0/node_modules/react-docgen/dist/utils/getMemberExpressionValuePath.js:61:17)
    at call (~/node_modules/.pnpm/@babel+traverse@7.25.9/node_modules/@babel/traverse/src/path/context.ts:36:20)
    at call (~/node_modules/.pnpm/@babel+traverse@7.25.9/node_modules/@babel/traverse/src/path/context.ts:21:18)

Config:

export default {
  stories: ['src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {},
  },
}