Storybook: Props slot not render right in Stories when use optional chain in component.

[uni-zheng]

Describe the bug
Props slot not render right in Stories(or MDX) when use optional chain in component.

There is [No props found for this component] placeholder in props slot. And props slot render right content when removed optional chain.

Code snippets

// .storybook/main.js
const path = require('path');

module.exports = {
  stories: [
    '../packages/**/*.stories.(ts|js|mdx)',
  ],

  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {
          'plugins': [
            '@babel/plugin-proposal-class-properties',
            '@babel/plugin-proposal-optional-chaining',
            '@babel/plugin-proposal-nullish-coalescing-operator',
            '@babel/plugin-proposal-export-default-from',
            '@babel/plugin-proposal-object-rest-spread',
          ],
        },
      },
    },
    '@storybook/addon-knobs',
    '@storybook/addon-a11y',
    '@storybook/addon-viewport',
    '@storybook/addon-backgrounds',
    '@storybook/addon-storysource',
  ],

  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            implementation: require('sass'),
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    });

    return config;
  },
};

// button.stories.js
import React from 'react';
import Button from '../Button.js';
import '../style/index.scss';

export default {
  title: 'ZUI/Button',
  component: Button,
};

export const Base = () => (
  <Button>base</Button>
);

System:

 System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 12.18.2 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.105
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-a11y: ^5.3.19 => 5.3.19 
    @storybook/addon-backgrounds: ^5.3.19 => 5.3.19 
    @storybook/addon-docs: ^5.3.19 => 5.3.19 
    @storybook/addon-knobs: ^5.3.19 => 5.3.19 
    @storybook/addon-storysource: ^5.3.19 => 5.3.19 
    @storybook/addon-viewport: ^5.3.19 => 5.3.19 
    @storybook/react: ^5.3.19 => 5.3.19 

Additional context
I added @babel/plugin-proposal-optional-chaining in addons config but it's not working.

[shilman]

I'm guessing this is a problem with react-docgen which is what generates the docgen info from your source. Might you be able to file an issue there?

[uni-zheng]

Here is I found https://github.com/reactjs/react-docgen/issues/463

[joeycozza]

So yeah, looks like babel made a change that was intentional, and ast-types needs to make an update. https://github.com/benjamn/ast-types/issues/383

One potential work around that is suggested here reactjs/react-docgen#463 is to pin the babel/core and babel/parser versions to 7.10.5. I don't know if that is the best course of action for storybook to take though. Maybe we just wait it out to get resolved itself?

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

[ethancrook99]

ast-types has updated this! There is currently a PR for react-docgen to update their dependencies, I'll make a PR here to update to the newest react-docgen when that change is merged.

[ethancrook99]

It looks like storybook doesn't need any updates for this to work--as far as I can tell, all that's left is for anyone with this issue to update any local dependencies on react-docgen to the latest version (5.3.0)

[idbartosz]

I'm experiencing same issue with Storybook v6.0.21 after clearing up package-lock file. Now, whenever component uses optional chaining I get

Any quick fix for that (other than keeping old package-lock)? I'm not using explicitly react-docgen only addon-docs.

---

I've checked the bare bones npx sb init --type react and it also breaks there. A bit more gracefully than my customized one but still it breaks with optional chaining 😉

CC @shilman @ethancrook99

[shilman]

@idbartosz looks like it's fixed in react-docgen https://github.com/reactjs/react-docgen/issues/463

[idbartosz]

@shilman so this will be fixed in next SB release because I see fix was merged on their side?

[shilman]

Once they release and you upgrade. React-docgen is not a direct dependency so i don't think storybook needs to do anything.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.24 containing PR #12748 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.27 containing PR #12748 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade