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

[Docs] PropsTable throwing error with styled-components@5 #8663

Closed
donysukardi opened this issue Nov 1, 2019 · 11 comments
Closed

[Docs] PropsTable throwing error with styled-components@5 #8663

donysukardi opened this issue Nov 1, 2019 · 11 comments

Comments

@donysukardi
Copy link
Contributor

donysukardi commented Nov 1, 2019

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

image

Using a wrapper component

image

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

@donysukardi donysukardi changed the title [Docs] PropsTable throwing error with styled-components [Docs] PropsTable throwing error with styled-components@5 Nov 1, 2019
@stale
Copy link

stale bot commented Nov 28, 2019

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 stale bot added the inactive label Nov 28, 2019
@stale stale bot removed the inactive label Nov 28, 2019
@shilman shilman added the bug label Nov 28, 2019
@shilman
Copy link
Member

shilman commented Nov 28, 2019

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

@johnjesse
Copy link

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

@stale
Copy link

stale bot commented Jan 7, 2020

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 stale bot added the inactive label Jan 7, 2020
@johnjesse
Copy link

johnjesse commented Jan 10, 2020

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

@stale stale bot removed the inactive label Jan 10, 2020
@johnjesse
Copy link

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

stale bot commented Feb 1, 2020

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 stale bot added the inactive label Feb 1, 2020
shilman added a commit that referenced this issue Feb 14, 2020
@shilman
Copy link
Member

shilman commented Feb 14, 2020

Attempted repro in: 14456b2

@stale stale bot removed the inactive label Feb 14, 2020
@stale stale bot added the inactive label Mar 6, 2020
@shilman
Copy link
Member

shilman commented Mar 7, 2020

@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 stale bot removed the inactive label Mar 7, 2020
@storybookjs storybookjs deleted a comment from stale bot Mar 7, 2020
@stale
Copy link

stale bot commented Mar 28, 2020

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 stale bot added the inactive label Mar 28, 2020
@stale
Copy link

stale bot commented Apr 28, 2020

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!

@stale stale bot closed this as completed Apr 28, 2020
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

3 participants