storybook 🚀 - No props appearing for named function export with Addon-docs

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?

shilman on 20 Dec 2019

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' } ]

getignited on 20 Dec 2019

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;

Zunaib on 27 Dec 2019

😕7

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.

getignited on 6 Jan 2020

👍1

@getignited Do you have a reproduction?

shilman on 6 Jan 2020

@shilman I'll put something together for you.

getignited on 6 Jan 2020

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

getignited on 7 Jan 2020

@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?

shilman on 7 Jan 2020

@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!

getignited on 7 Jan 2020

🚀1

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 :-)

andreasabilio on 17 Jan 2020

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!

stale[bot] on 7 Feb 2020

@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
Screen Shot 2020-02-11 at 08 42 15

File Structure
Screen Shot 2020-02-11 at 08 59 45

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

AlexMold on 11 Feb 2020

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.

soulfresh on 11 Feb 2020

cc @mrmckeb

shilman on 12 Feb 2020

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

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

anusky on 12 Feb 2020

👍1

@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.

mrmckeb on 13 Feb 2020

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!

stale[bot] on 5 Mar 2020

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

Dashue on 13 Mar 2020

@Dashue do you have a repro?

shilman on 14 Mar 2020

@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' />

Dashue on 14 Mar 2020

❤2 🚀1

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

thehulke on 24 Mar 2020

👍3

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!

stale[bot] on 14 Apr 2020

I would love to help out with this. I'm currently in the 6 alpha, but still using the old 1.2.2 preset. As soon upgrade to 2 or 3 my props disappear

Dashue on 14 Apr 2020

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!

stale[bot] on 6 May 2020

I had a similar issue, I had forgotten to add 'Component' attribute in the story's export.

export default { title: 'Playground|Components/Button', decorators: [/** Your decorators */], component: Button (/** Your component name */), };

tabrez96 on 26 May 2020

👍1

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!

stale[bot] on 17 Jun 2020

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;

Horsty80 on 28 Jun 2020

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? https://github.com/storybookjs/storybook/issues/9311

shilman on 29 Jun 2020

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 >

Horsty80 on 29 Jun 2020

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

shilman on 29 Jun 2020

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 on 29 Jun 2020

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

Horsty80 on 2 Jul 2020

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?

shilman on 3 Jul 2020

🚀1 ❤1 👍1

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

Horsty80 on 3 Jul 2020

🚀1

@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>
);

EdenTurgeman on 13 Jul 2020

@EdenTurgeman do you have a repro?

shilman on 13 Jul 2020

@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?)

EdenTurgeman on 13 Jul 2020

@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

shilman on 14 Jul 2020

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!

stale[bot] on 8 Aug 2020

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!

wolfhoundjesse on 2 Sep 2020

👍1

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!

stale[bot] on 4 Oct 2020

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
};

ianldgs on 23 Oct 2020

👀1 👍1

Storybook: No props appearing for named function export with Addon-docs

Most helpful comment

All 42 comments

Try doing this, got out of the same problem.

Related issues