Storybook: Storybook 5.2 static app docs either has missing props section or props descriptions

[glenp01]

Describe the bug
After updating to Storybook 5.2, the props section is rendering fine when running via storybook locally but after generating a static app with the storybook build, the props section either does not show up or the descriptions are missing.

To Reproduce
Steps to reproduce the behavior:

1. Create a component with proptypes
2. Add stories for it.
3. When viewing it locally it works fine
4. After running yarn build-storybook and viewing the static app, the props section has the above issues

Expected behavior
The props section should be the same as it is when running storybook

Screenshots
Locally

Static app

Code snippets

Alert.defaultProps = {
  mode: "static",
  type: "warning",
};

Alert.propTypes = {
  mode: PropTypes.oneOf(["static", "timed"]),
  type: PropTypes.oneOf(["success", "warning", "error", "primary"]),
  message: PropTypes.string.isRequired,
  /**
   * No background or border if static alert
   */
  blank: PropTypes.bool,
  /**
   * Allows icon override, accepts material icon name
   */
  icon: PropTypes.string,
};

System:

Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Safari: 13.0
  npmPackages:
    @storybook/addon-actions: ^5.2.1 => 5.2.1
    @storybook/addon-docs: ^5.3.0-alpha.0 => 5.3.0-alpha.0
    @storybook/addon-knobs: ^5.2.1 => 5.2.1
    @storybook/addon-links: ^5.2.1 => 5.2.1
    @storybook/addon-notes: ^5.2.1 => 5.2.1
    @storybook/addons: ^5.2.1 => 5.2.1
    @storybook/react: ^5.2.1 => 5.2.1

Additional context
None

[shilman]

Sorry for the slow reply here. Can you post your config/presets files? Also, are you using CRA?

[glenp01]

Here you go.
config.js

import React from "react";
import { addParameters, configure, addDecorator } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import StoryRouter from "storybook-react-router";
import { ThemeProvider } from "styled-components";
import { AlertContainer } from "../src/components/Common/Alerts/AlertContainer";
import theme from "../src/utils/theme";
import "../public/reset.css";
import "../src/styles/app.scss";

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

addParameters({
  options: {
    storySort: (a, b) => a[1].id.localeCompare(b[1].id),
  },
});

addDecorator(withKnobs);
addDecorator(StoryRouter());
addDecorator(story => (
  <ThemeProvider theme={theme}>
    <AlertContainer>{story()}</AlertContainer>
  </ThemeProvider>
));

// automatically import all files ending in *.stories.js
configure(
  [
    require.context("../src", true, /\.stories\.mdx$/),
    require.context("../src", true, /\.stories\.js$/),
  ],
  module
);

presets.js

module.exports = ["@storybook/addon-docs/react/preset"];

And yes CRA is being used. Thanks!

[shilman]

@glenp01 can you try this? https://www.npmjs.com/package/@storybook/preset-create-react-app

cc @mrmckeb

[jebadirad]

I am having this same issue, both with CRA and without CRA.

Without CRA i installed react-scripts and was able to get the loading create-react-app config message to appear. I think that solved another issue I was facing as well so I have kept react-scripts as a dev dependency.

Would you, @shilman , suggest trying that preset-create-react-app as well? Unfortunatley I am using a babel.config.js at the root of my project. So i am not sure if thats going to hurt more than help?

[shilman]

There are a collection of issues piling up with different versions of what's probably the same underlying problem. I'm going to try to spend some time on it this week.

[jebadirad]

Much appreciated!!!

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

[robbeman]

It may be related to how the context is consumed.

I am writing stories in MDX, using the <Meta /> block to set the context and then I use <Props of="." />. This works in dev builds, but on static builds I get similar, partial props tables as described above.

The reason I think it has to do with the context is because in some of my MDX files I reference multiple components with <Props of={Button} /> (for example) and this one shows the complete props table.

Scratch that, it was a coincidence that some did render completely. Below is an example of a component for which the props table renders properly. I'm not sure yet why this would be.

// A dummy component for generating documentation for column properties
export const Column = () => <></>;
Column.propTypes = {
  /* eslint-disable react/no-unused-prop-types */
  /** The header label of the column */
  header: string.isRequired,
  /** The name of the property or an accessor method if selecting deeper data */
  accessor: oneOfType([
    string.isRequired,
    func.isRequired,
  ]).isRequired,
  /** Display the cell content in bold type */
  bold: bool,
  /** Text alignment of the header label and cell content */
  align: oneOf(['left', 'center', 'right']),
  /** Include this column into sorting option, alphabetically or numerically */
  sortable: oneOf(['alpha', 'numeric']),
};
Column.defaultProps = {
  bold: false,
  align: 'left',
  sortable: null,
};

Sidenote: My reason for doing this is to document the shape of an array prop more elaborately.

[aleshh]

Having the same issue. For me, the props table in the static app does not show props that are required, or props that have an undefined default.

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

[shilman]

Repro here: https://github.com/storybookjs/storybook/commit/964d40dc6917ac1b7e7184daa2ef064f7462165c

[vgvg]

I was running into the same issue. Setting NODE_ENV to development for the build-storybook command got this working for me. The default seems to be NODE_ENV=producction for this command. My build-storybook script now looks like so:

"scripts": {
    "build-storybook": "NODE_ENV=development build-storybook"
}

Not sure what else this might do under the hood, but I'm now seeing props in the static build of Storybook just like when running locally.