Storybook: [v6.0.0-beta.28] Storybook with Docs breaks when using components that export HOCs or Styled Components

[jbanulso]

Describe the bug
Storybook will completely break with Docs enabled if there are stories that are not exported as React components. Original discussion moved here.

To Reproduce
Steps to reproduce the behavior:

1. Setup Storybook with addon-docs
2. Add a story that uses a component that doesn't export a plain React component. For instance:

// Exported as HOC
const Component = props => <div {...props} />;
export default withTheme(Component);

// Exported as Styled Component
const Heading = styled.h1`
  // styles
`;
export default Heading;

1. See "Invalid hook call" error in Storybook
   

Expected behavior
Storybook should work fine with these kind of components. As far as I know this was working in version 6.0.0-alpha.X.

Redefining the exports as below will fix it, but I'd prefer not to change my components to make Docs work.

// These will work

const ThemedComponent = withTheme(Component);
export default props => <ThemedComponent {...props} />;

const Heading = styled.h1`
  // styles
`;
export default props => <Heading {...props} />;

Code snippets
Dependencies:

"@sambego/storybook-styles": "^1.0.0",
"@storybook/addon-a11y": "^6.0.0-beta.28",
"@storybook/addon-actions": "^6.0.0-beta.28",
"@storybook/addon-controls": "6.0.0-beta.28",
"@storybook/addon-docs": "^6.0.0-beta.28",
"@storybook/addon-knobs": "^6.0.0-beta.28",
"@storybook/addon-links": "^6.0.0-beta.28",
"@storybook/addon-toolbars": "6.0.0-beta.28",
"@storybook/addon-viewport": "^6.0.0-beta.28",
"@storybook/addons": "^6.0.0-beta.28",
"@storybook/react": "^6.0.0-beta.28",
"@storybook/theming": "^6.0.0-beta.28",
"apollo-storybook-react": "^0.2.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",

Preview.js:

import { addDecorator, addParameters } from '@storybook/react';
import styles from '@sambego/storybook-styles';
import { withKnobs } from '@storybook/addon-knobs';

import withThemeProvider from './withThemeProvider';
import { managerTheme } from './manager';

addDecorator(StoryFn => <StoryFn />); // Workaround needed to be able to use @sambego/storybook-styles
addDecorator(
  styles({
    // ...some styles
  })
);

addDecorator(withKnobs);

addParameters({
  options: {
    showRoots: true,
    sortStoriesByKind: true,
    storySort: (a, b) => a[1].id.localeCompare(b[1].id)
  },
  docs: {
    theme: managerTheme
  }
});

addDecorator(withThemeProvider);

export const globalArgTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme for components',
    defaultValue: 'default',
    toolbar: {
      icon: 'circlehollow',
      items: [
        {
          value: 'default',
          title: 'Default'
        }
      ]
    }
  }
};

[tooppaaa]

It is related from the previous fix.
When a component doesn't have DocGen or PropTypes, we try to render it.
But we actually can't due to hooks.
My previous fixed worked because DocGen always succeed on the components I tried.

I was mis-leaded by my implementations with lots of forwardRef.

I do not think Storybook should try to render components at all. @tmeasday @shilman, any opinion on calling component.render({}).type ?

On the other hand, I'm surprised the community is not experiencing this issue as much as us.
I will try to setup some use cases in order to get it fixed.

[tooppaaa]

try {
        processedComponent = component.render({}).type;
      } catch (error) {
        processedComponent = component;
      }

But it's bad...
I'm not sure what the guards should be.

[jbanulso]

@tooppaaa out of curiosity, where in the code is component.render({}).type taking place?

On the other hand, I'm surprised the community is not experiencing this issue as much as us.
I will try to setup some use cases in order to get it fixed.

I'm surprised too, I thought there'd be a bunch of issues with this use case as well 😄

[tooppaaa]

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

[shilman]

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.30 containing PR #11195 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

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

[jbanulso]

Thanks @tooppaaa and @shilman for the quick fix! 😄

[eric-burel]

Hi, I can reproduce this with "6.0.0-rc.13", could you please clarify the fix? Should I update somthing?

Edit: ok all addons needs to have matching version with "@storybook/react", so 6.0.0-rc.13 for instance, that solved it for me :)

[shilman]

@eric-burel Yes please upgrade with npx sb@next upgrade --prerelease which does that and also runs some checks

[milenaNeumann]

Hi here,
I can reproduce this with "6.0.0-rc18"; for very simple components it works, but the stories of more complex components produce the hook-error as seen above. Do you have any tips for me?

[eric-burel]

It seems that it reappeared in v18, will retry with v13 because it stopped working for me just after a npm reinstall.
Edit: now can repro with v13 :/ other significant change in my app was adding addons-controls and a11y.
Edit: also in v20. I am looking for the commit where it start failing in my app.
Edit: does not seem to be related to the version but indeed depends on the stories themselves. I have isolated the failing commit (a next-i18next update so totally unrelated to sb), will provide a link to it
Final edit: @shilman this commit triggers the issue with hooks.
The previous commit is fine, Storybook + addons was working ok.

I do have an i18n decorator in my config, so I guess some particular hook change in next-i18nnext makes it fail. Hope it'll help to find the underlying issue.

[milenaNeumann]

For me, the error disappears when I remove "@storybook/addon-controls" from the addons list in main.js and I can view the stories of all components in the Canvas and the Docs view.
The controls in the PropTable in my .mdx story still work as before, but when I use a Toggle for a boolean, I get this error:

Warning: A component is changing an uncontrolled input of type checkbox to be controlled. 
Input elements should not switch from uncontrolled to controlled (or vice versa). 
Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Of course, I am now missing the "Controls" tab in the Canvas view.

[shilman]

@milenaNeumann do you have repro i can look at?

[milenaNeumann]

Sorry, not atm, I'm not allowed to share code from my workplace...