Storybook Docs (angular) addon does not show compodoc documentation on production build

[emanguy]

Describe the bug A clear and concise description of what the bug is.

When building storybook for production, the angular docs plugin will fail to render the table of inputs/outputs/properties/etc. for stories in CSF format with a "component" property on the default export if webpack minifies the code.

To Reproduce Steps to reproduce the behavior:

1. Set up the webpack configuration via .storybook/main.js to minify production code
2. Generate the documentation.json file with compodoc and run build-storybook
3. Serve static content. On the dev server, the component documentation will show up successfully render the inputs/outputs/properties/etc., but with the minified production build it won't show up.

Expected behavior A clear and concise description of what you expected to happen.

Both the dev build and production build of storybook should render the component docs.

Screenshots If applicable, add screenshots to help explain your problem.

Figured this one out via reverse engineering the code a bit. I added some logging statements in the compiled react code in my node_modules which captures this behavior when the "Props" component gets rendered into the dom (i.e. right before "extractProps()" is invoked)

Code added to @storybook/addon-docs/dist/blocks/Props.js:

Code added to @storybook/addon-docs/dist/frameworks/angular/compodoc.js:

Behavior on dev server:

Behavior on minified production build:

Code snippets If applicable, add code samples to help explain your problem.

See above section.

System Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS 11.0.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 10.24.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Safari: 14.0.1
  npmPackages:
    @storybook/addon-actions: ^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-links: ^5.3.19 => 5.3.19
    @storybook/addon-notes: ^5.3.19 => 5.3.19
    @storybook/addon-storysource: ^5.3.19 => 5.3.19
    @storybook/addons: ^5.3.19 => 5.3.19
    @storybook/angular: ^5.3.19 => 5.3.19

Additional context Add any other context about the problem here.

It appears this happens because the @storybook/addon-docs/angular library uses Component.name on the class declaration for the component to determine the name of the component it should be looking up in documentation.json. When the build is minified, Component.name typically resolves to a single character like "c", which doesn't match any names in documentation.json and therefore fails to render the component documentation on the docs page. I'm not sure whether or not this same behavior would happen with .mdx as we're not using it at the moment.

The current workaround is to disable minification in the webpack config like so:

// in .storybook/main.js

module.exports = {
    stories: [ /* ... */ ],
    addons: [ /* ... */ ],
    webpackFinal: async (config) => {
            config.optimization = {
                minimize: false
            };
            return config;
        }
}

[shilman]

Do you have a repro repo you can share?

Seems to be working fine on our sample app in the storybook monorepo

https://next--storybookjs.netlify.app/angular-cli/

[emanguy]

Sure, here's a repo that exhibits the issue: https://github.com/emanguy/storybook-docs-bug-repro

[elmarbeckmann]

Any news on this issue? Seems like nothing has been done with this?