Storybook: addon-info: prop descriptions are always empty

[notgiorgi]

though I have comments:

UIRange.propTypes = {
  /** Value of the range */
  value: PropTypes.number.isRequired,
  /** onChange event callback */
  onChange: PropTypes.func.isRequired,
  /** Minimum value */
  min: PropTypes.number,
  /** Maximum value */
  max: PropTypes.number,
  /** increment/decrement by */
  step: PropTypes.number,
  /** if true range is disabled */
  disabled: PropTypes.bool,
  /** Show value on tooltip */
  showValueOnToolTip: PropTypes.bool,
  /** Show value on thumb */
  showValueOnThumb: PropTypes.bool,
}

Versions:
storybook/addon-info: "3.2.11"
storybook/react: "3.2.11"

[swashcap]

@notgiorgi I was experiencing this, too. I believe this is due to customization of Storybook’s webpack config. Modification of module rules was messing with storybook’s react-docgen configuration in my case. The fix for me:

 module.exports = (baseConfig, configType) => {
   const isDev = configType === "DEVELOPMENT";

   // Resolve to iOS-specific components
   baseConfig.resolve.extensions.push(".ios.js");

   baseConfig.module.rules.push(
-    {
-      test: /\.js$/,
-      exclude: /node_modules/,
-      use: {
-        loader: "babel-loader",
-        options: {
-          cacheDirectory: true
-        }
-      }
-    },
     {
       test: /\.(gif|jpe?g|png|svg)$/,
       use: {
         loader: "url-loader",
         options: {
           name: "[name].[ext]"
         }
       }

[pjnovas]

I'm having same problem, unfortunately the fix from @swashcap didn't work for me.

[danielduan]

The props have to be in the same file as the react component. Other than that, there are a few types of components that aren't detected by the babel plugin right now.

https://github.com/storybooks/babel-plugin-react-docgen/issues/33

[pjnovas]

Alright, I have found my problem, I'll check it out more in depth tomorrow but anyone can reproduce it by taking the current example DocgenButton and changing the render into a conditional ternary operator like:

/** Button component description */
const DocgenButton = ({ check, disabled, label, style, onClick }) =>
  check ?
    <span>yaaay</span>
  :
    <button disabled={disabled} style={style} onClick={onClick}>
      {label}
    </button>;

Changing it into this works just fine:

/** Button component description */
const DocgenButton = ({ check, disabled, label, style, onClick }) => {
  if (check) return <span>yaaay</span>
  return <button disabled={disabled} style={style} onClick={onClick}>
    {label}
  </button>;
}

And to clarify even more, I have run my component through react-docgen alone and works (without the ES-next stuff, like using require() and module.exports)

[mlmassey]

I'm seeing the same problem with my prop documentation. Mine was a bit weird in that I would get prop documentation for some Components, but some would be empty. I can confirm my problem/situation is the same as @swashcap. I'm using a custom webpack config with Storybook loading in extend mode (not full control mode). The problem is essentially that I still included a rule to parse js/jsx using babel-loader in my config. This makes no sense, since if you look at @storybook/react/dist/server/config.js, it simply extends your custom config with its own, which creates two rules that are running babel-loader. Two major problems with this:

• You are running two babel-loaders in parallel, which makes no sense and is fun for performance of your Storybook builds
• My rule has the option cacheDirectory: true, whereas Storybook is setting the babel cache directory to node_modules/.cache/storybook. This creates two babel caches: node_modules/.cache/storybook and node_modules/.cache/babel-loader.

I didn't analyze further why sometimes I get the prop docs, but my guess is that it's a problem with having two caches and a cache mismatch when parsing with the two babel-loaders. My solution was to simply remove my rule for the babel-loader, as well as clean my cache rm -r node_modules/.cache.

@pjnovas I would check if you have a similar problem, and try to clean your cache after removing your rule for the babel-loader.

I would recommend that the Storybook team mention this issue in the documentation and warn against running two babel-loader rules. Another option is to check the customConfig rule set to see if the user is accidently including a duplicate babel-loader rule and throw a warning or error.

[AlexanderTserkovniy]

Same here pretty much the same as @pjnovas has. Hey buddy @pjnovas have you been able to fix that?

My issue snippet is:

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import MaskedInput from 'react-text-mask';
import * as DefaultProps from '../../helpers/default-props';
import styles from './Input.pcss';

const Input = ({
  placeholder = '', size, className, mask, ...rest
}) => {
  const propObj = {
    ...rest,
    className: classnames(styles.Input, className, {
      [styles[`size-${size}`]]: size,
    }),
    placeholder,
  };

  return mask ?
    <MaskedInput
      {...propObj}
      mask={mask}
    /> :
    <input
      {...propObj}
    />;
};

Input.propTypes = {
  ...DefaultProps.Input,
  /** text, which is shown until the text is written */
  placeholder: PropTypes.string,
  /** size of the input, ordinary by default, could be `md` */
  size: PropTypes.oneOf([undefined, 'md']),
  /** mask for masked input pattern */
  mask: MaskedInput.propTypes.mask,
  /** all the rest params (e.g. onClick) */
  rest: PropTypes.any,
};

export default Input;

Again if I remove ternary operator it will work just fine.

[swashcap]

@AlexanderTserkovniy I think I ran into that problem, too. If I recall I changed to if and it worked:

const Input = ({ mask, ...props }) => {
  if (mask) {
    return <MaskedInput {...props} />
  }
  return <input {...props} />
}

Related: reactjs/react-docgen#107

[AlexanderTserkovniy]

Jesus what a dirty approach... anyway, thanks.

[stale[bot]]

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 60 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[bregenspan]

This one should be fixed in v4 as v4 pulls in a more recent react-docgen, which resolves the upstream issue (as of https://github.com/reactjs/react-docgen/commit/d2c096f2e4212606fe6f283f740ab0d74e77c103).

[eightHundreds]

component description is empty ,does anyone have this problem

@storybook/addon-actions": "^3.4.0",
    "@storybook/addon-centered": "^3.4.5",
    "@storybook/addon-info": "^3.4.5",
    "@storybook/addon-knobs": "^3.4.5",
    "@storybook/addon-links": "^3.4.0",

[edelgado]

@danielduan

The props have to be in the same file as the react component.

Is this still the case? I'm setting up Storybook 5.2.1 with the docs add-on, but my prop descriptions are always empty unless I have the props in the same file as my react component. Is there some configuration I can do to make it work, even when the props are defined in another file? I re-use props so it's convenient to define them once and share them across.

Thanks!

[Smolations]

+1

[gaurav5430]

I'm seeing the same problem with my prop documentation. Mine was a bit weird in that I would get prop documentation for some Components, but some would be empty. I can confirm my problem/situation is the same as @swashcap. I'm using a custom webpack config with Storybook loading in extend mode (not full control mode). The problem is essentially that I still included a rule to parse js/jsx using babel-loader in my config. This makes no sense, since if you look at @storybook/react/dist/server/config.js, it simply extends your custom config with its own, which creates two rules that are running babel-loader. Two major problems with this:

• You are running two babel-loaders in parallel, which makes no sense and is fun for performance of your Storybook builds
• My rule has the option cacheDirectory: true, whereas Storybook is setting the babel cache directory to node_modules/.cache/storybook. This creates two babel caches: node_modules/.cache/storybook and node_modules/.cache/babel-loader.

I didn't analyze further why sometimes I get the prop docs, but my guess is that it's a problem with having two caches and a cache mismatch when parsing with the two babel-loaders. My solution was to simply remove my rule for the babel-loader, as well as clean my cache rm -r node_modules/.cache.

@pjnovas I would check if you have a similar problem, and try to clean your cache after removing your rule for the babel-loader.

I would recommend that the Storybook team mention this issue in the documentation and warn against running two babel-loader rules. Another option is to check the customConfig rule set to see if the user is accidently including a duplicate babel-loader rule and throw a warning or error.

This helped me in resolving this issue. I was using a custom webpack config, in which I was overriding storybook's default babel-loader rule with my own babel-loader rule, which simply meant that the docgen preset was never registered and hence no docs were produced.

As a workaround, I am now preserving storybook's babel-loader rule and also adding my own.