No props appearing for named function export with Addon-docs

[LiteMorgan]

Describe the bug
Been trying various things to get the props to appear for my component library with no luck. This is using the 5.3.0-rc.0 version of Storybook and Addon-docs.

I've been trying with both js and mdx file types and seeing no success. A named function export, with props and comments, renders in the Docs file with "No props found for this component".

I've set up the MDX rules following the Manual configuration guide on the README.

Expected behavior
Props should be populated in Docs.

Code snippets
Component:

import React from 'react'
import PropTypes from 'prop-types'

export const Dummy = ({
  textProp
}) => {
  return (
    <div>
      { textProp }
    </div>
  )
}

Dummy.propTypes = {
  /**
   * Test code export
   */
  textProp: PropTypes.string.isRequired,
}

MDX:

import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks'
import { Dummy } from './'

<Meta
  title="mdx/dummy"
  component={Dummy}
/>

# Test

<Preview>
  <Story name="testing">
    <Dummy textProp="Hello world" />
  </Story>
</Preview>

## Props

<Props of={Dummy} />

Screenshots

System:

  System:
    OS: macOS 10.15.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
  Binaries:
    Node: 11.13.0 - ~/.nvm/versions/node/v11.13.0/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.7.0 - ~/.nvm/versions/node/v11.13.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.88
    Safari: 13.0.3
  npmPackages:
    @storybook/addon-a11y: ^5.3.0-rc.0 => 5.3.0-rc.0 
    @storybook/addon-contexts: ^5.3.0-rc.0 => 5.3.0-rc.0 
    @storybook/addon-docs: ^5.3.0-rc.0 => 5.3.0-rc.0 
    @storybook/addon-knobs: ^5.3.0-rc.0 => 5.3.0-rc.0 
    @storybook/addon-links: ^5.3.0-rc.0 => 5.3.0-rc.0 
    @storybook/addon-viewport: ^5.3.0-rc.0 => 5.3.0-rc.0 
    @storybook/addons: ^5.3.0-rc.0 => 5.3.0-rc.0 
    @storybook/preset-scss: ^1.0.2 => 1.0.2 
    @storybook/react: ^5.3.0-rc.0 => 5.3.0-rc.0 
    @storybook/theming: ^5.3.0-rc.0 => 5.3.0-rc.0

[shilman]

Are you using CRA? If so, have you tried the standalone preset? https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app

Is babel-plugin-react-docgen being applied when you yarn storybook --debug-webpack?

[LiteMorgan]

Not using CRA, as this is a Components-only library (is bundled and then exported for use in a different project).

babel-plugin-react-docgen appears under the test: /\.(mjs|jsx?)$/ section, as an option for babel-loader.

[ '/.../@storybook/react/node_modules/babel-plugin-react-docgen/lib/index.js',
   { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' } ]

[Zunaib]

Try doing this, got out of the same problem.

import React, {  FC } from 'react';
import PropTypes from 'prop-types'

export interface DummyProps extends HTMLAttributes<HTMLElement> {
textProp:string;
 };

export const Dummy: FC<DummyProps > = function ({ textProp }) {
 return (
    <div>
      { textProp }
    </div>
  );
};

Dummy.propTypes = {
  /**
   * Test code export
   */
  textProp: PropTypes.string.isRequired,
};

export default Dummy;

[LiteMorgan]

That seems a little excessive just to get Prop definitions working within Storybook - I was under the impression standard React could be used, rather than having to double up on type definitions for every Component.

@shilman has there been any update on this? I've updated to 5.3.0-rc.9 and I'm still facing the same issue.

[shilman]

@getignited Do you have a reproduction?

[LiteMorgan]

@shilman I'll put something together for you.

[LiteMorgan]

@shilman I've managed to reproduce that correctly here: https://github.com/getignited/storybook-docs-test

[shilman]

@getignited

• I added a debugging statement to babel-plugin-react-docgen and saw that it wasn't being run on your JS files due to your configuration
• I added babel-plugin-react-docgen to your list of babel plugins in .storybook/webpack.config.js
• I uncommented an error logging line in babel-plugin-react-docgen and am seeing this error: Error: Configuration contains string/RegExp pattern, but no filename was passed to Babel

I need to jump onto something else, but maybe that gets you on the right path?

[LiteMorgan]

@shilman I'll take a look at that, thank you. When I was setting that reproduction up, it definitely worked for a bit, until some of the Babel stuff started coming into play. Just got to figure out which one is upsetting it, I suppose!

[andreasabilio]

We've also run into this issue. Indeed babel-plugin-react-docgen seems not to be running - eventhough it is present in the config object outputted by --debug-webpack.

Furthermore, it works with a dummy React component but doesn't work with Semantic UI React (SUIR) components... And all SUIR components do have a propTypes property.

When a SUIR component reaches the getDocgenSection function it lacks the __docgenInfo property.

This is on Storybook v5.3.3 and v5.3.6.

Hope it helps with the debugging :-)

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[AlexMold]

@shilman I have the same problem with CRA
.storybook/main.js

module.exports = {
    presets: [
        {
            name: 'storybook-addon-deps/preset',
            options: {
                exclude: /^@babel/,
            },
        },
    ],
    stories: ['../src/**/*.stories.(js|mdx)'],
    addons: [
        '@storybook/preset-create-react-app',
        '@storybook/addon-actions',
        '@storybook/addon-links',
        '@storybook/addon-knobs/register',
        '@storybook/addon-storysource',
        '@storybook/addon-backgrounds/register',
        '@storybook/addon-docs',
    ],
}

I have a component

import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import {capitalize} from 'util/capitalize'
import styles from './styles/Button.module.sass'

const baseClassName = 'Button'

export const ButtonView = React.memo(Button)

function Button({children, classes = {root: styles[baseClassName]}, className, color, ...other}) {
    return (
        <button
            className={classNames(
                classes.root,
                {
                    [styles[`${baseClassName}${capitalize(color)}`]]: color !== 'default',
                },
                className,
            )}
            {...other}
        >
            {children}
        </button>
    )
}

Button.defaultProps = {
    color: 'default',
}

Button.propTypes = {
    children: PropTypes.node.isRequired,
    color: PropTypes.oneOf(['default', 'primary']),
    classes: PropTypes.object,
}

Screenshot

File Structure

In components, I'm using named exports and reexports if it matters

[soulfresh]

I've noticed this same issue on a couple projects and was just able to track it down to the CRA preset. The props table works if I remove @storybook/preset-create-react-app in main.js. Removing this doesn't seem to have any other impact on my storybook (though error messages note this will break in the future).

Here's my config setup:

// main.js
var path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx'],
  addons: [
    // '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-storysource',
    '@storybook/addon-knobs',
    '@storybook/addon-a11y',
    '@storybook/addon-docs',
  ],
  webpackFinal: (config) => {
    config.resolve.alias = {
      '~': path.resolve(__dirname, '../src/'),
    };

    return config;
  },
};

I also have a preview.js file that imports a global stylesheet but I doubt that has any impact here.

[shilman]

cc @mrmckeb

[anusky]

Same problem here. This is my main.js configuration.

I'm currently using version 5.3.13 of storybooks and addons.

[mrmckeb]

@soulfresh, are you able to supply a simple repro repo? I can then take a look in context and see what's happening.

We have this working with the preset in the examples folder in that project, so it might be something else conflicting.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Dashue]

Another one having the same issue here. It was working recently

[shilman]

@Dashue do you have a repro?

[Dashue]

@shilman Hey Michael, thanks for your time.
I spent yesterday digging through bugs, issues and discussions.
I was both wrapping my components in a hoc (to apply consistent styling to all my components), which involved generics, this was working until I moved the hoc to it's own file for re-use.

I've solved it by exporting one component to feed to the docs addon and another to consume and use in the story itself.
I also upgraded to 6.0 but I believe this approach would work for 5x as well.

I.e

export const _heading = () => ...
export const Heading = ComponentBaseHoc<TProps>(_heading)

Story:

export default {
  title: 'UI | Type / Heading',
  component: _heading,
}

export const HeadingWithTitle = () => <Heading title='my title' />

[thehulke]

@getignited Hey, Have you tried import * as React from 'react' in your component?

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Horsty80]

Hi all, i've a similar issue, and i didn't know how to fix it ?
Any suggestion ?

//main.js

module.exports = {
  stories: ["../src/**/*.stories.js"],
  addons: [
    "@storybook/preset-create-react-app",
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-docs",
  ],
};

addParameters({
  docs: {
    inlineStories: true,
    container: DocsContainer,
    page: DocsPage,
  },
});

storiesOf("Test", module)
  .addParameters({ component: Test })
  .add("primary", () => <Test text={primaryButton.text} />);

import React from "react";
import PropTypes from "prop-types";

const Test = ({ text }) => {
  return <button>{text}</button>;
};
Test.defaultProps = {
  text: "Create",
};
Test.propTypes = {
  text: PropTypes.string,
};

export default Test;

[shilman]

We've overhauled props handling in 6.0, can somebody who's having this issue try upgrading and LMK if you're still having the issue? #9311

[Horsty80]

Hi @shilman , i've update to v6

  "devDependencies": {
    "@storybook/addon-actions": "^6.0.0-beta.37",
    "@storybook/addon-docs": "^6.0.0-beta.37",
    "@storybook/addon-links": "^6.0.0-beta.37",
    "@storybook/addons": "^6.0.0-beta.37",
    "@storybook/preset-create-react-app": "^3.1.2",
    "@storybook/react": "^6.0.0-beta.37",

But props it's steel not working and don't appear in docs tab.
=/
And i've no error message just the sentence
No inputs found for this component. Read the docs >

[shilman]

@Horsty80 do you have a public repro i can look at?

[Horsty80]

Yes sure normally it's public, let me know if it's not
https://gitlab.com/Horsty/horsty-components

here it's hosted test version of the repo
https://happy-wiles-0180d2.netlify.app/?path=/docs/button--primary
thanks for helping me ;)

[Horsty80]

Hi @shilman any news of this bug ? =/
How can i help you to investigate on this ?

[shilman]

Took me awhile to track down with @mrmckeb and I'm not very satisfied with where we got. Try adding the following to your babel.config.js:

  const presets = ["@babel/preset-env", "@babel/preset-react"];

I modified a bunch of other things in the project in the process of debugging, but pretty sure that's the proper fix. WDYT?

[Horsty80]

Thanks @shilman it's working fine !
i've my propsTypes showing.

So fix with :

• update in v6
• add presets const presets = ["@babel/preset-env", "@babel/preset-react"]; in babel.config.js
• npm install

[EdenTurgeman]

@shilman after upgrading to 6.0.0-rc.3
We couldn't get our typescript props to display even with a simple example component
No inputs found for this component. Read the docs >

with this main.ts:

const path = require('path');

interface TypescriptOptions {
  check?: boolean;
  docgen?: 'none' | 'react-docgen' | 'react-docgen-typescript';
}

export const typescript: TypescriptOptions = {
  check: true,
  docgen: 'react-docgen-typescript'
};

module.exports = {
  typescript,
  stories: ['../stories/**/*.story.@(js|jsx|ts|tsx)'],
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        sourceLoaderOptions: {
          rule: {
            include: [path.resolve(__dirname, '../stories')],
          },
          loaderOptions: {
            prettierConfig: { printWidth: 80, singleQuote: false },
          },
        },
      },
    },
    {
      name: '@storybook/addon-storysource',
      options: {
        rule: {
          include: [path.resolve(__dirname, '../stories')],
        },
        loaderOptions: {
          prettierConfig: { printWidth: 80, singleQuote: false },
        },
      },
    },
    '@storybook/addon-knobs/register',
]
};

preview.js:

import React from 'react';
import { bootstrap } from "@ui/styleguide";
import { addDecorator ,addParameters} from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { StoryContainer } from "../stories/storyComponents/StoryContainer";

addDecorator(Story =>
  <StoryContainer>
    <Story />
  </StoryContainer>
);

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
});

bootstrap();

Our example:

import React from 'react';
import { ClickThing } from './ClickThing';

export default {
  title: 'Components|Click',
  component: ClickThing,
};

export const Basic = ({ value = 5, showZero = true }) => <ClickThing {...{ value, showZero }} />;

import React, { FunctionComponent } from 'react';

export interface IClickProps {
  value?: number;
  maxDigits?: 1 | 2 | 3;
  showZero?: boolean;
  onClick?(value: number): void;
  subject?: string;
}

export const ClickThing: FunctionComponent<IClickProps> = ({
  value,
  maxDigits,
  showZero = false,
  onClick = () => {},
  children,
  subject,
}) => (
  <div>
    {value}
    <span>{showZero}</span>
    <div>{subject}</div>
  </div>
);

[shilman]

@EdenTurgeman do you have a repro?

[EdenTurgeman]

@shilman
Unfortunately Not at this time... since we're working with a private repo.
I might eventually try to create a public repo since we're having quite a few issues upgrading which we can't diagnose, is there a way I could give out more info considering our current state? (webpack debug info? custom webpack config?)

[shilman]

@EdenTurgeman standalone minimal repro is the best way. if you have a bunch of issues around a specific feature, like prop tables, a repo that demonstrates all those issues in one place is also great

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[wolfhoundjesse]

Just popping in to say that I created a minimum repro for you, but everything was working fine, so … .

In my own project, the props aren't showing up for a default export. If I change it to named (but won't, because code splitting) it works, and if I export it both ways (why is this allowed?), then I get props when I import it as a named component.

At any rate, thanks for taking the time!

Edit: Jeremy W. Sherman makes a point about using both.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ianldgs]

In my case is a Stencil component using the react integration.

No propTypes on the component, but there are TypeScript Props definitions.

export default {
  title: 'My Stencil Component',
  parameters: { notes: { markdown } },
  component: MyStencilComponent
};

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[keyserfaty]

Same issue here. Proptypes are not shown not even in the example provided by Storybook:

import React from 'react';
import PropTypes from 'prop-types';
import './button.css';

/**
 * Primary UI component for user interaction
 */
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

Button.propTypes = {
  /**
   * Is this the principal call to action on the page?
   */
  primary: PropTypes.bool,
  /**
   * What background color to use
   */
  backgroundColor: PropTypes.string,
  /**
   * How large should the button be?
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  /**
   * Button contents
   */
  label: PropTypes.string.isRequired,
  /**
   * Optional click handler
   */
  onClick: PropTypes.func,
};

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: 'medium',
  onClick: undefined,
};

Docs:

Versions:

    "@storybook/addon-actions": "^6.1.17",
    "@storybook/addon-essentials": "^6.1.17",
    "@storybook/addon-links": "^6.1.17",
    "@storybook/node-logger": "^6.1.17",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^6.1.17",
    "react": "^16.13.1",

[keyserfaty]

Nevermind! Can confirm that adding and installing the following solved the issue for me:

"presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]

[srt4rulez]

On Storybook 6.1.21, I had the same issue as @keyserfaty, where it only showed a few props from the default "button" component that Storybook shipped with.

The issue was because I completely overwrote the module.rules array in webackFinal function of main.js with my own webpack config.

I instead spread storybooks rules first, then did my own webpack config:

const webpackConfig = require('./../webpack.config');

module.exports = {
    // ...
    webpackFinal: async (config) => {

        const appConfig = webpackConfig(); // my webpack config exports a function

        return {
            ...config,
            module: {
                ...config.module,
                rules: [
                    ...config.module.rules,
                    ...appConfig.module.rules,
                ],
            },
        };
    },
}