storybook: Prop table broken in 5.3.2 with propTypes

Thanks for the helpful explanation @shilman, it explained why it was working before and I realized that we actually hadn’t previously added that as a dependency as it had worked without it.

@danilovaz I fixed by adding babel-plugin-react-docgen as a dev dependency, and then adding react-docgen to plugins for the babel-loader in my webpack config (as our project doesn’t use a .babelrc).

Its’a an option @shilman , I dont like it though.

It shouldn’t have ever work without the proper babel plugin setup and it’s an easy fix for the user.

If we had back the fallback, I fear we might end up with weird issues that might take a lot of our time to figure out what’s happening.

Could we instead update the error message to suggest to configure properly the babel plugin required by the props table?

@artemAp yes, if it’s even possible. A lot of the information we need might already be stripped out of the published package. At any rate, we’re still stabilizing the current props table for now

@shilman Will you plan to support props from installed package in future?

@patricklafrance THanks, Patrick, unfortunately this didn’t work.

I write components in ES (before webpack/babel) and stories in js (not mdx)

=> yarn storybook --debug-webpack gives me the following, which is, I suspect, the default storybook babel configuration, that executes added to my user settings defined in babel.config.jsin the root of /myproject.

{
  test: /\.mdx$/,
  exclude: /\.(stories|story).mdx$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: '/my_project/node_modules/.cache/storybook',
        presets: [
          [
            '/my_project/node_modules/@babel/preset-env/lib/index.js',
            {
              shippedProposals: true,
              useBuiltIns: 'usage',
              corejs: '3'
            }
          ],
          '/my_project/node_modules/@babel/preset-react/lib/index.js',
          '/my_project/node_modules/@babel/preset-flow/lib/index.js'
        ],
        plugins: [
          '/my_project/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
          '/my_project/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
          '/my_project/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
          [
            '/my_project/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
            { sourceMap: true, autoLabel: true }
          ],
          '/my_project/node_modules/babel-plugin-macros/dist/index.js',
          '/my_project/node_modules/@babel/plugin-transform-react-constant-elements/lib/index.js',
          '/my_project/node_modules/babel-plugin-add-react-displayname/index.js',
          [
            '/my_project/node_modules/babel-plugin-react-docgen/lib/index.js',
            {
              DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
            }
          ]
        ]
      }
    },
    {
      loader: '@mdx-js/loader',
      options: {
        remarkPlugins: [ [Function: slug], [Function: externalLinks] ]
      }
    }
  ]
},

As you can see, the docgen plugin is actually loaded. I have tried, without much understanding, to copy my babel.config.js to the .storybook folder, without any result either.

My presets file ./.storybook/presets.js' is as follows module.exports = ['@storybook/addon-docs/preset'];

Also I noticed console.log(Component.__docgenInfo) yields nothing

My components are all generated with this template (inside a yeoman generator): https://github.com/fwrlines/generator-react-component/blob/master/generators/app/templates/Component.js

My stories look all like this (also generated with yeoman) : https://github.com/fwrlines/generator-storybook-story/blob/master/generators/app/templates/story.js

I have tried with Class Components as well.

In 5.2.8 this was half working : the propotypes table and defaults were detected and appeared in storybook docs, but the description of each prop didn’t show at all. Now I only have a “No props found for this component” message for every component.

Edit

• Update to 5.3.7 didn’t fix it
• Going to create a blank project with @storybook/cli to try to isolate this

Edit 2 : fixed it, unknowingly

• I created a new storybook project with npx -p @storybook/cli sb init --type react, installed npm i -D prop-types and used the same yeoman generators for stories/components than before. Docgen works fine
• copied my babel.config.js to the root of the new bootstrapped project. Installed the babel plugins through npm. I was wondering whether this would mess up the working config but no, docgens still works fine.
• I tried both default es export and named exports and both work all right.
• I mirrored the folder structure of the bugged docgen repo (by having multiple levels of exports), and it still works fine.
• I didn’t need to install babel-plugin-react-docgen
• I didn’t need to copy or create over any .babelrc file (actually I use babel.config.js of which there is only one copy, in the project root, not the .storybook folder)

Edit 3 : found the source of the bug

I was doing this :

 import(/* webpackChunkName: "css.module_name" */ './module_name.scss')

Instead of

import styles from './module_name.scss'

In files where components are defined

For a weird reason, Storybook 5.3 voids the contents of the docgen when using the first option, independently of where the dynamic import is in the file