Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jbanulso opened this issue Jun 15, 2020 · 13 comments

Comments

@jbanulso
Copy link

jbanulso commented Jun 15, 2020

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

Screenshot 2020-06-15 at 15 04 52

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
Copy link
Contributor

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
Copy link
Contributor

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

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

@jbanulso
Copy link
Author

@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
Copy link
Contributor

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

@shilman
Copy link
Member

shilman commented Jun 16, 2020

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.

@shilman shilman closed this as completed Jun 16, 2020
@jbanulso
Copy link
Author

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

@eric-burel
Copy link
Contributor

eric-burel commented Jul 22, 2020

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
Copy link
Member

shilman commented Jul 23, 2020

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

@milenaNeumann
Copy link

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
Copy link
Contributor

eric-burel commented Jul 31, 2020

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
Copy link

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
Copy link
Member

shilman commented Jul 31, 2020

@milenaNeumann do you have repro i can look at?

@shilman shilman closed this as completed Jul 31, 2020
@milenaNeumann
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants