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

functional components not working? #27

Closed
Tobi-mmt opened this issue Oct 6, 2020 · 2 comments
Closed

functional components not working? #27

Tobi-mmt opened this issue Oct 6, 2020 · 2 comments

Comments

@Tobi-mmt
Copy link

Tobi-mmt commented Oct 6, 2020

What I have

Hello, I have a functional component like this:

import styled from "styled-components";

export type ButtonProps = {
  children: string;
};

export const Button = styled.button<ButtonProps>`
  color: ${({ theme }) => theme.color.highlight};
  padding: 1em;
`;

export default Button;

What is happening

And if I run the command zeplin connect it fails with the following error:

Connecting components to Zeplin components failed.

    Error occurred while processing components/button/index.tsx with @zeplin/cli-connect-react-plugin:

    No suitable component definition found.

If i rewrite the component to an class like this:

import React from 'react';
import styled from "styled-components";

export type ButtonProps = {
  children: string;
};

export const Button = styled.button<ButtonProps>`
  color: ${({ theme }) => theme.color.highlight};
  padding: 1em;
`;

export default class ButtonClass extends React.Component {
  render(){
    return Button
  }
}

It works well.

What I expected

I expected I can connect functional components also with zeplin. but it looks like this is not correct.

Can someone confirm that or show me a working solution for my code?

@yuqu
Copy link
Contributor

yuqu commented Oct 6, 2020

Hey,

Yes, you are correct about the problem. It is about the inability of react-docgen to resolve imported React components. There are open PRs (reactjs/react-docgen#352, reactjs/react-docgen#464) to support it but are still waiting to be merged. The former one is stale but I guess the latter will be merged soon.

AFAIK, the issue is already resolved for TS components using react-docgen-typescript, we plan to refactor the plugin to use both libraries if there won't be a react-docgen release with imported component support soon.

@yuqu
Copy link
Contributor

yuqu commented May 7, 2021

Forgot to update here, #31 and #32 fix this by enabling usage of react-docgen-typescript

@yuqu yuqu closed this as completed May 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants