Storybook: Docs addon propType description broken when using CRA and emotion's jsx pragma

[jscheel]

When using the jsx pragma for the css prop from emotion, storybook's docs addon does not render propType descriptions.

Here is a repo that reproduces the issue:
https://github.com/jscheel/storybook-cra-emotion-jsx-pragma

The repo provides a working and broken example. In the working example (NormalExample), the description column of the prop table is generated properly. In the broken example (EmotionExample), the description column is blank.

If I kill the create-react-app config (easiest way is to just npm remove react-scripts), everything works as expected in both examples.

System:

Environment Info:

  System:
    OS: macOS Sierra 10.12.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
  Binaries:
    Node: 12.13.0 - /var/folders/27/fqmq58ks6kzbkmmgg7whv4280000gn/T/fnm-shell-2901125/bin/node
    Yarn: 1.13.0 - ~/.yarn/bin/yarn
    npm: 6.12.0 - /var/folders/27/fqmq58ks6kzbkmmgg7whv4280000gn/T/fnm-shell-2901125/bin/npm
  Browsers:
    Chrome: 79.0.3945.79
    Firefox: 70.0.1
    Safari: 10.1.1
  npmPackages:
    @storybook/addon-actions: ^5.2.8 => 5.2.8
    @storybook/addon-docs: ^5.2.8 => 5.2.8
    @storybook/addon-links: ^5.2.8 => 5.2.8
    @storybook/addons: ^5.2.8 => 5.2.8
    @storybook/react: ^5.2.8 => 5.2.8

Normal, Working Example:

Broken, Emotion Example:

[shilman]

Thanks for the repro, although it doesn't work for me out of the box. Did you test it?

It complained about not having @storybook/addon-knobs installed, so I installed it.

After that, I tried to install the preset-create-react-app standalone preset, which I expect would fix the problem:

https://www.npmjs.com/package/@storybook/preset-create-react-app

However, it gave me a babel error. @mrmckeb can you take a look?

[jscheel]

I’ll attach some screenshots in a bit

[jscheel]

@shilman ok, I've updated the repo with the missing package. I was deleting some unused packages before committing and accidentally took out @storybook/addon-knobs.

I've added screenshots of each example in my repo and here so you can see the problem.

I also tried preset-create-react-app and had issues as well.

[mrmckeb]

I'm unable to test this as I'm hitting this issue... https://github.com/inspect-js/is-set/issues/3.

You also should be able to skip the babel.config.js file, as we load the required config from CRA.

[hckhanh]

I get the same issue when I try to upgrade Storybook. My props are not displayed properly anymore. It does not show any props.

[shilman]

i think this is the underlying issue: https://github.com/storybookjs/presets/issues/78

will try to work through that, and then look into the emotion issue after it's resolved. thanks for your patience!

[shilman]

Fixed in @storybook/[email protected]!! Please upgrade and try it out! Thanks @mrmckeb for the fix 🙌

Then we can get back to the original issue about jsx pragma 😉

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

[mrmckeb]

Can this issue be closed? It appears to have been resolved.