Storybook: addon-docs Error: Cannot read property 'theme' of undefined

[chrisahardie]

Describe the bug
When documenting a component styled with styled-components I get:

Cannot read property 'theme' of undefined

To Reproduce
Steps to reproduce the behavior:

Create styled button:

import styled from "styled-components";

/**
 * Props
 */
interface Props {
  /**
   * Indicates if the button is disabled
   */
  disabled?: boolean;
  /**
   * Type of button
   */
  type: "submit" | "button" | "reset";
}

/**
 * Button component
 * @param props - Component props
 * @returns a button component
 */
export const Button = styled.button.attrs<Props>((props) => ({
  type: props.type
}))`
  border-radius: 3px;
  border: 1px solid #d2d2d2;
  display: block;
  margin: 0 0 1em;
  background-color: ${(props) => (props.disabled ? "#ccc" : "transparent")};
  cursor: ${(props) => (props.disabled ? "not-allowed" : "auto")};
`;

Create a story:

import React from "react";
import { Button } from "src/components";

// Default export required for Storybook
// eslint-disable-next-line import/no-default-export
export default {
  title: "Form controls",
};

/**
 * Button story
 * @returns Button story
 */
export const ButtonStory = () => <Button>Submit</Button>;

In the MDX, enter the following:

import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { Button } from "src/components";

# Preview

<Preview>
  <Story name="Button Story">
    <Button>hello</Button>
  </Story>
</Preview>

# Props

<Props of={Button} />

Where I expect to see the Props description, I see "Cannot read property 'theme' of undefined"

Expected behavior
I expected to see Props displayed

System:

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.7.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0

Additional context
Package.json:

"dependencies": {
    "final-form": "^4.18.7",
    "moment": "^2.24.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-final-form": "^6.3.5",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "shortid": "^2.2.15",
    "styled-components": "^5.0.1"
  },
"devDependencies": {
    "@storybook/addon-actions": "^5.3.17",
    "@storybook/addon-docs": "^5.3.17",
    "@storybook/addon-links": "^5.3.17",
    "@storybook/addons": "^5.3.17",
    "@storybook/preset-create-react-app": "^2.1.0",
    "@storybook/react": "^5.3.17",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-router": "^5.1.4",
    "@types/react-router-dom": "^5.1.3",
    "@types/shortid": "0.0.29",
    "@types/styled-components": "^5.0.1",
    "@typescript-eslint/eslint-plugin": "^2.24.0",
    "eslint-config-airbnb-typescript": "^7.2.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsdoc": "^22.1.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^2.5.0",
    "prettier": "1.19.1",
    "typescript": "~3.7.2"
  }

Please let me know if a copy of the project would be helpful. Thanks for your efforts!

[shilman]

Repro repo would be great! Thanks!

[stevesims]

+1 from me on this issue - i'm seeing exactly the same thing

[chrisahardie]

Repro repo here: https://github.com/chrisahardie/storybook-styled-component

Thanks!

[shilman]

This @chrisahardie! Using your repro, I found that the bug is due to this line, which is a (dodgy) heuristic for dealing with props for React forwardRefs. I'm not quite sure what the fix is, but if anybody wants to experiment and figure it out, it would be much appreciated:

https://github.com/storybookjs/storybook/blob/master/addons/docs/src/frameworks/react/extractProps.ts#L29

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

[LBRDan]

Hello there
I recently tripped onto this bug, but i find this a little more trivial that it looks
Apparently, the forwardRef function acts like a proxy to the real component and adds a "render" method that needs the props declared to get the type() callable object instance
Even mocking the forwardRef props to render an empty fragment does not help to bypass the problem, as this results in "no props" message in docs
Maybereact-docgen could bring a walkaround to this ?

[trumbitta]

I have a fairly similar setup, but I go straight to the "no props" message, perhaps due to my custom configuration with @nrwl/nx

On a Codesandbox, with CRA, the exact same components and stories I use within Nx got me the "theme of undefined" message instead.

Subscribed the issue and hoping for a fix or workaround :)

[dariusrosendahl]

We have the same problem here. No props for styled components. And all our components are styled 😅

[wilmervanheerde]

+1 same issue here, we're kind of dependent on this feature to generate our documentation.

[pklada]

Same problem here. Any reliable work-arounds at the moment?

[shilman]

I ran the following in @chrisahardie 's repo and it worked after the upgrade. YMMV:

npx sb@next upgrade --prerelease

I also had to yarn add babel-loader --dev and update the main.js stories glob from ../src/**/*.stories.(ts|tsx|js|jsx|mdx) to ../src/**/*.stories.@(ts|tsx|js|jsx|mdx)

[markrebec]

Updating to the latest RC also worked for me. One additional thing to keep in mind is that the official addons will bump along with storybook, and some of their integration/documentation has changed slightly.

Mostly that means registering them in your .storybook/main.js with @storybook/addon-a11y instead of @storybook/addon-a11y/register, but a couple of them also have minor changes to their usage - for example the @storybook/addon-backgrounds addon changed the shape of the backgrounds configuration key in the story parameters slightly.

If you see any weird addon behavior or anything isn't working after upgrading, you can reference the latest 6.0 docs on this branch https://github.com/storybookjs/storybook/tree/6.0-docs/addons

[chrisahardie]

This add-on is amazing! Thanks so much!

[chrisahardie]

@shilman In the repo, the button component has some additional props:

interface Props {
  /**
   * Indicates if the button is disabled
   */
  disabled?: boolean;
  /**
   * Type of button
   */
  type: "submit" | "button" | "reset";
}

Usage:

export const Button = styled.button.attrs<Props>((props) => ({
  type: props.type
}))`
 ...
`

However, when I render out the props table with <Props of={Button} />, I only get the following:

• ref
• theme
• as
• forwardedAs

Would it be best to create a new issue rather than re-opening this one?

[shilman]

Would it be best to create a new issue rather than re-opening this one?

yes pls! 👍