Storybook: [Docs] PropsTable throwing error with styled-components@5

[donysukardi]

Describe the bug

Getting the following error in place of PropsTable when displaying styled-components@5 component in Docs

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

To Reproduce
Refer to the code snippets below

Expected behavior
Props should be displayed for styled-components components

Screenshots
Using styled-components directly

Using a wrapper component

Code snippets

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Box = styled.div`
  background-color: ${props => props.bg};
`;

Box.propTypes = {
  bg: PropTypes.string,
};

const MyBox = props => <Box {...props} />;

MyBox.propTypes = {
  bg: PropTypes.string,
};

export default {
  title: 'Box',
  component: Box, // the error will be shown when using Box, but not with MyBox
};

export const basic = () => <Box bg="red">Some box with background color</Box>;

System:

Storybook version 5.3.0-alpha.35

Environment Info:

System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
Binaries:
Node: 12.11.1 - /usr/local/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.11.3 - /usr/local/bin/npm
Browsers:
Chrome: 78.0.3904.87
Safari: 13.0.3

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

Can somebody provide a simple repro repo I can look at? Thanks!

[johnjesse]

I'm getting the same error, although not using styled-components, I'll try and make a simple repro to demonstrate

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

[johnjesse]

Sorry, Christmas/Work got in the way

Here's a basic repro -
https://github.com/johnjesse/StorybookTemplate

It's a basic repro. I made it in typescript by default, but it's using the compiled js files with storybook

Run:
yarn,
tsc,
yarn start-storybook --docs

It looks like it's the mobx-react-lite wrapper that's causing the issue... but I think I've seen it without that, so I'll try and make an even more minimal repro too

[johnjesse]

It looks like there is a simple work-around. If instead of doing

export default observer(Component)

you do

const ObservingComponent = observer(Component)
export default (props) => <ObservingComponent {...props} />

which isn't great, but seems to work

I think the problem is somehow it's not recognising it's an actual component being exported

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

Attempted repro in: https://github.com/storybookjs/storybook/commit/14456b27f5c50b3645b80e93b23c86369201e9a5

[shilman]

@donysukardi can you try the recommended 6.0 setup (should work in 5.3 too) and based on the repro linked above I expect the problem to be fixed:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-prop-tables-with-typescript

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

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!