Storybook: Impossible to make Flow work with addon-info in my project

[bastoune]

What I already did :
Looking for this similar issue in github & StackOverflow a lot, and upgrading to the latest babel-plugin-react-docgen as recommended

Bug
-> No propTypes defined! when using flow in my component or class

What happens
-> I expect to have the same behaviour as the storybook example Comments from Flow declarations
-> Instead, I get the message above or only the default props if present with unknown in the propTypes column (please see screenshot below)

Steps & tried

1. Install those libs to my project :

    "@storybook/addon-actions": "4.0.0-alpha.3",
    "@storybook/addon-info": "4.0.0-alpha.3",
    "@storybook/addon-knobs": "4.0.0-alpha.3",
    "@storybook/addon-notes": "4.0.0-alpha.3",
    "@storybook/addon-options": "4.0.0-alpha.3",
    "@storybook/react": "4.0.0-alpha.3",
    "babel-plugin-react-docgen": "2.0.0-rc.0",

1. Copy / Paste the exact same code as the storybook repository to my app

//addon-info.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { action } from '@storybook/addon-actions';
import FlowTypeButton from './TestStoryBookWithFlow'


storiesOf('Addons|Info.React Docgen', module)
  .add(
    'Comments from Flow declarations',
    withInfo(
      'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
    )(() => <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />)
  )

// TestStoryBookWithFlow.jsx
// @flow
import React from 'react';

/* eslint-disable react/no-unused-prop-types,react/require-default-props */

const Message = {};

type PropsType = {
  /** A multi-type prop to be rendered in the button */
  label: string,
  /** Function to be called when the button is clicked */
  onClick?: Function,
  /** Boolean representing whether the button is disabled */
  disabled?: boolean,
  /** A plain object */
  obj?: Object,
  /** A complex Object with nested types */
  shape: {
    id: number,
    func?: Function,
    arr?: Array<{
      index: number,
    }>,
    shape?: {
      shape?: {
        foo?: string,
      },
    },
  },
  /** An array of numbers */
  arrayOf?: Array<number>,
  /** A custom type */
  msg?: typeof Message,
  /** `oneOf` as Enum */
  enm?: 'News' | 'Photos',
  /** `oneOf` A multi-type prop of string or custom Message */
  union?: string | typeof Message,
};

/** FlowTypeButton component description imported from comments inside the component file */
const FlowTypeButton = ({ label, onClick, disabled }: PropsType) => (
  <button onClick={onClick} disabled={disabled}>
    {label}
  </button>
);

FlowTypeButton.defaultProps = {
  disabled: false,
  onClick: () => {},
};

export default FlowTypeButton;



md5-1d716a1b86b9ccb1858880f6349edf0f



{
  "presets": [
    "env",
    "flow",
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}



md5-fe0650c38ce237712170425da469f273



//@flow
import {configure} from '@storybook/react'
import {setOptions} from '@storybook/addon-options'

setOptions({
    selectedAddonPanel: 'notes'
})

// automatically load stories that respect the filename convention
const req = require.context('../src/app', true, /(stor(y|ies).js|.story.js$)/)

// the MainDecorator wraps all stories, so that styling is ok

function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);



md5-9b9b17ed28392e83b4ce8722067f9e32



const path = require('path')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: [
        require.resolve('webpack/hot/dev-server'),
        require.resolve('../src/index.js'),
        require.resolve('../src/index.html'),
        require.resolve('../src/assets/css/app.scss'),
        require.resolve('../src/assets/mushin.font.js')
    ],
    resolve: {
        //choose which extensions can be loaded in  imports
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {minimize: true}
                    }
                ]
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader
                    , {
                        loader: 'css-loader' // translates CSS into CommonJS
                    }, {
                        loader: 'sass-loader' // compiles Sass to CSS
                    }]
            },
            {
                test: /\.font\.js/,
                loaders: ['style-loader', 'css-loader', 'webfonts-loader'],
                include: path.resolve(__dirname, '/assets/mushin.font.js')
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg|otf)$/,
                use: ['file-loader?name=fonts/[sha512:hash:base64:7].[ext]']
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    'file-loader?hash=sha512&digest=hex&name=images/[hash].[ext]',
                ],
            }
        ]
    },
    plugins: [
        //extract all css files
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ],
};



md5-c1166a6c697f0514afe628e53b245204



"devDependencies": {
    "@storybook/addon-actions": "4.0.0-alpha.3",
    "@storybook/addon-info": "4.0.0-alpha.3",
    "@storybook/addon-knobs": "4.0.0-alpha.3",
    "@storybook/addon-notes": "4.0.0-alpha.3",
    "@storybook/addon-options": "4.0.0-alpha.3",
    "@storybook/react": "4.0.0-alpha.3",
    "babel-plugin-react-docgen": "2.0.0-rc.0",
    "cross-env": "5.1.4",
    "enzyme": "3.3.0",
    "enzyme-adapter-react-16": "1.1.1",
    "identity-obj-proxy": "3.0.0",
    "markdown-loader": "2.0.2",
    "path": "0.12.7",
    "react-hot-loader": "4.0.1",
    "webpack-dev-server": "3.1.3"
  },
  "dependencies": {
    "axios": "0.18.0",
    "babel-core": "6.26.0",
    "babel-eslint": "8.2.3",
    "babel-loader": "7.1.4",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-preset-env": "1.6.1",
    "babel-preset-flow": "6.23.0",
    "babel-preset-react": "6.24.1",
    "copy-webpack-plugin": "4.5.1",
    "css-loader": "0.28.11",
    "draft-js": "0.10.5",
    "draft-js-hashtag-plugin": "2.0.1",
    "draft-js-linkify-plugin": "2.0.1",
    "draft-js-mention-plugin": "2.0.1",
    "draft-js-modifiers": "0.2.1",
    "draft-js-plugins-editor": "2.0.4",
    "draft-js-single-line-plugin": "2.0.1",
    "eslint": "4.19.1",
    "eslint-plugin-flowtype": "2.46.2",
    "eslint-plugin-jest": "21.15.0",
    "eslint-plugin-react": "7.7.0",
    "faker": "4.1.0",
    "file-loader": "1.1.11",
    "flow-bin": "0.69.0",
    "history": "4.7.2",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "3.2.0",
    "i18n-react": "0.6.4",
    "immutability-helper": "2.6.6",
    "immutable": "3.8.2",
    "jest": "22.4.3",
    "jsdom": "11.8.0",
    "json-loader": "0.5.7",
    "memoizee": "0.4.12",
    "mini-css-extract-plugin": "0.4.0",
    "moment": "2.22.1",
    "node-sass": "4.8.3",
    "pdfmake": "0.1.36",
    "progressbar.js": "1.0.1",
    "prop-types": "15.6.1",
    "rc-tooltip": "3.7.2",
    "react": "16.3.1",
    "react-datepicker": "1.4.1",
    "react-dom": "16.3.1",
    "react-ga": "2.4.1",
    "react-image-lightbox": "4.6.0",
    "react-modal": "3.3.2",
    "react-redux": "5.0.7",
    "react-router-dom": "4.2.2",
    "react-router-redux": "5.0.0-alpha.9",
    "react-sortable-hoc": "0.6.8",
    "react-test-renderer": "16.3.1",
    "react-tooltip": "3.5.0",
    "rebuild-node-sass": "1.1.0",
    "redux": "3.7.2",
    "redux-actions": "2.3.0",
    "redux-immutable": "4.0.0",
    "redux-logger": "3.0.6",
    "redux-thunk": "2.2.0",
    "redux-thunk-actions": "1.1.6",
    "sass-loader": "7.0.1",
    "style-loader": "0.20.3",
    "sweetalert2": "6.11.5",
    "webfonts-loader": "4.1.0",
    "webpack": "4.5.0",
    "webpack-cli": "2.0.14"
  }

[bastoune]

I finally manage to make it work (at least most of the time, I can't isolate for now components for which it is not working properly).

I forgot to add react-docgen in the plugin list of my .babelrc =>

//.babelrc
{
  "presets": ["env", "flow", "react"],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
    "react-docgen"
  ]
}

Still go a lot of components not rendering properly props, I am trying to understand why and my post later

[stasgavrylov]

@bastoune Thanks for your suggestions, it worked. Although I'm having exactly same problem now – some components have prop tables displayed, and some don't. Will try to find the reason for this.

[bastoune]

I did many tests and here is what I found out :

-> If I import a component (into the story file) which as only one default export it works
-> In all other cases, it doesn't work :
For example :

• a file with one or more "const" export
• a file with one or more "const" and 1 default export

So I think it's a real Bug and not only a problem of configuration.

Maybe @stasgavrylov can confirm my thoughts ?

[stasgavrylov]

@bastoune Unfortunately, I couldn't reproduce your case with multiple exports (at least, after trying to have both default and named export from 1 file).

In my project named exports work fine (I'm not using any default exports).

What I've noticed is that functional components are not supported. If I rewrite them using Component or PureComponent, everything works as expected. But functional components' stories do not display prop tables.

Edit: I also wanted to point out, that I also have a custom webpack config in .storybook folder. But I don't have a separate .babelrc in there. When I've tried to add your .babelrc file, prop tables were not displayed. As soon as I removed it, everything worked. I suppose storybook may use my global Babel config it that case. Although, it's strange, since the file would be the same.

[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 30 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!