Skip to content

[Bug]: react-docgen-typescript causes mcp to error on props extraction #34710

@tim-richter

Description

@tim-richter

Describe the bug

Generated manifests/components.json file contains errors, when 'react-docgen-typescript' is used with the mcp addon.

Example:

"components": {
    "example-button": {
      "id": "example-button",
      "name": "Button",
      "path": "./src/stories/Button.stories.ts",
      "stories": [
        {
          "id": "example-button--primary",
          "name": "Primary",
          "snippet": "const Primary = () => <Button onClick={fn()} primary label=\"Button\" />;"
        },
        {
          "id": "example-button--secondary",
          "name": "Secondary",
          "snippet": "const Secondary = () => <Button onClick={fn()} label=\"Button\" />;"
        },
        {
          "id": "example-button--large",
          "name": "Large",
          "snippet": "const Large = () => <Button onClick={fn()} size=\"large\" label=\"Button\" />;"
        },
        {
          "id": "example-button--small",
          "name": "Small",
          "snippet": "const Small = () => <Button onClick={fn()} size=\"small\" label=\"Button\" />;"
        }
      ],
      "import": "import { Button } from \"before-storybook\";",
      "jsDocTags": {},
      "error": {
        "name": "react-docgen-typescript found no component docs",
        "message": "File: /home/projects/aonizroprl.github/src/stories/Button.tsx\nreact-docgen-typescript did not return any component docs for this file."
      }
    },
}

The reproduction link shows that this happens for all example stories. The only thing that changed from the reproduction link, was using react-docgen-typescript in main.ts.

Reproduction link

https://stackblitz.com/edit/mcp-react-docgen-typescript-bug?file=.storybook%2Fmain.ts

Reproduction steps

  1. use addon-mcp and react-docgen-typescript in a storybook
  2. generate manifest files via build-storybook
  3. look at generated components.json and see that no props were generated, and mcp silently failed to extract infos from components

System

{
  time: {
    created: '2024-09-12T14:22:48.318Z',
    modified: '2024-09-12T14:22:48.956Z',
    '0.0.0': '2024-02-14T23:04:10.427Z',
    '0.0.1': '2024-09-12T14:22:48.686Z'
  },
  name: 'before-storybook',
  'dist-tags': {
    latest: '0.0.1'
  },
  versions: [
    '0.0.1'
  ],
  maintainers: [
    {
      name: 'tojoniaina30',
      email: 'tojorar@gmail.com'
    }
  ],
  description: '<h1>React Latest (Vite | TypeScript)</h1>',
  readmeFilename: 'README.md',
  version: '0.0.1',
  type: 'module',
  scripts: {
    dev: 'vite',
    build: 'tsc -b && vite build',
    lint: 'eslint .',
    preview: 'vite preview',
    storybook: 'storybook dev -p 6006',
    'build-storybook': 'storybook build'
  },
  dependencies: {
    '@radix-ui/react-accordion': '^1.2.0',
    '@radix-ui/react-avatar': '^1.1.0',
    '@radix-ui/react-checkbox': '^1.1.1',
    '@radix-ui/react-dropdown-menu': '^2.1.1',
    '@radix-ui/react-form': '^0.1.0',
    '@radix-ui/react-icons': '^1.3.0',
    '@radix-ui/react-popover': '^1.1.1',
    '@radix-ui/react-select': '^2.1.1',
    '@radix-ui/react-tabs': '^1.1.0',
    '@radix-ui/themes': '^3.1.3',
    classnames: '^2.5.1',
    react: '^18.3.1',
    'react-dom': '^18.3.1',
    sass: '^1.77.8'
  },
  devDependencies: {
    '@chromatic-com/storybook': '^1.6.1',
    '@eslint/js': '^9.9.0',
    '@storybook/addon-essentials': '^8.2.9',
    '@storybook/addon-interactions': '^8.2.9',
    '@storybook/addon-links': '^8.2.9',
    '@storybook/addon-onboarding': '^8.2.9',
    '@storybook/blocks': '^8.2.9',
    '@storybook/react': '^8.2.9',
    '@storybook/react-vite': '^8.2.9',
    '@storybook/test': '^8.2.9',
    '@types/react': '^18.3.3',
    '@types/react-dom': '^18.3.0',
    '@vitejs/plugin-react': '^4.3.1',
    autoprefixer: '^10.4.20',
    eslint: '^9.9.0',
    'eslint-plugin-react-hooks': '^5.1.0-rc.0',
    'eslint-plugin-react-refresh': '^0.4.9',
    globals: '^15.9.0',
    postcss: '^8.4.41',
    'postcss-loader': '^8.1.1',
    storybook: '^8.2.9',
    tailwindcss: '^3.4.10',
    typescript: '^5.5.4',
    'typescript-eslint': '^8.0.1',
    vite: '^5.4.1'
  },
  resolutions: {
    '@storybook/addon-a11y': '8.2.9',
    '@storybook/addon-actions': '8.2.9',
    '@storybook/addon-backgrounds': '8.2.9',
    '@storybook/addon-controls': '8.2.9',
    '@storybook/addon-docs': '8.2.9',
    '@storybook/addon-essentials': '8.2.9',
    '@storybook/addon-mdx-gfm': '8.2.9',
    '@storybook/addon-highlight': '8.2.9',
    '@storybook/addon-interactions': '8.2.9',
    '@storybook/addon-jest': '8.2.9',
    '@storybook/addon-links': '8.2.9',
    '@storybook/addon-measure': '8.2.9',
    '@storybook/addon-onboarding': '8.2.9',
    '@storybook/addon-outline': '8.2.9',
    '@storybook/addon-storysource': '8.2.9',
    '@storybook/addon-themes': '8.2.9',
    '@storybook/addon-toolbars': '8.2.9',
    '@storybook/addon-viewport': '8.2.9',
    '@storybook/builder-vite': '8.2.9',
    '@storybook/builder-webpack5': '8.2.9',
    '@storybook/core': '8.2.9',
    '@storybook/builder-manager': '8.2.9',
    '@storybook/channels': '8.2.9',
    '@storybook/client-logger': '8.2.9',
    '@storybook/components': '8.2.9',
    '@storybook/core-common': '8.2.9',
    '@storybook/core-events': '8.2.9',
    '@storybook/core-server': '8.2.9',
    '@storybook/csf-tools': '8.2.9',
    '@storybook/docs-tools': '8.2.9',
    '@storybook/manager': '8.2.9',
    '@storybook/manager-api': '8.2.9',
    '@storybook/node-logger': '8.2.9',
    '@storybook/preview': '8.2.9',
    '@storybook/preview-api': '8.2.9',
    '@storybook/router': '8.2.9',
    '@storybook/telemetry': '8.2.9',
    '@storybook/theming': '8.2.9',
    '@storybook/types': '8.2.9',
    '@storybook/angular': '8.2.9',
    '@storybook/ember': '8.2.9',
    '@storybook/html-vite': '8.2.9',
    '@storybook/html-webpack5': '8.2.9',
    '@storybook/nextjs': '8.2.9',
    '@storybook/preact-vite': '8.2.9',
    '@storybook/preact-webpack5': '8.2.9',
    '@storybook/react-vite': '8.2.9',
    '@storybook/react-webpack5': '8.2.9',
    '@storybook/server-webpack5': '8.2.9',
    '@storybook/svelte-vite': '8.2.9',
    '@storybook/svelte-webpack5': '8.2.9',
    '@storybook/sveltekit': '8.2.9',
    '@storybook/vue3-vite': '8.2.9',
    '@storybook/vue3-webpack5': '8.2.9',
    '@storybook/web-components-vite': '8.2.9',
    '@storybook/web-components-webpack5': '8.2.9',
    '@storybook/blocks': '8.2.9',
    storybook: '8.2.9',
    sb: '8.2.9',
    '@storybook/cli': '8.2.9',
    '@storybook/codemod': '8.2.9',
    '@storybook/core-webpack': '8.2.9',
    '@storybook/csf-plugin': '8.2.9',
    '@storybook/instrumenter': '8.2.9',
    '@storybook/react-dom-shim': '8.2.9',
    '@storybook/source-loader': '8.2.9',
    '@storybook/test': '8.2.9',
    '@storybook/preset-create-react-app': '8.2.9',
    '@storybook/preset-html-webpack': '8.2.9',
    '@storybook/preset-preact-webpack': '8.2.9',
    '@storybook/preset-react-webpack': '8.2.9',
    '@storybook/preset-server-webpack': '8.2.9',
    '@storybook/preset-svelte-webpack': '8.2.9',
    '@storybook/preset-vue3-webpack': '8.2.9',
    '@storybook/html': '8.2.9',
    '@storybook/preact': '8.2.9',
    '@storybook/react': '8.2.9',
    '@storybook/server': '8.2.9',
    '@storybook/svelte': '8.2.9',
    '@storybook/vue3': '8.2.9',
    '@storybook/web-components': '8.2.9',
    jackspeak: '2.1.1'
  },
  gitHead: '382a91ad6f51eb5c7a9ec6424970e5fe843e9f5a',
  dist: {
    integrity: 'sha512-tpNDxOJEFabfaLB2KPxzhI4x1xKaYGn11JmD/3zCYGaoQ+YQ5KjY5NralcuYmRY2aTCkwJrXUkh2J9crJUMMUg==',
    shasum: '072991ea0bc776d41c3c118b055c8875ce870a99',
    tarball: 'https://registry.npmjs.org/before-storybook/-/before-storybook-0.0.1.tgz',
    fileCount: 59,
    unpackedSize: 5182124,
    signatures: [
      {
        keyid: 'SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA',
        sig: 'MEUCIQDm3EFF9RnjpdGv4DekCQL1FDpfBAet8nMp6TIvQie/6gIgG6MObkJFLfdY94WR77tQEESl9UszXqQmQFchWERv5yM='
      }
    ]
  },
  directories: {}
}

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions