functional components not working?

[Tobi-mmt]

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]

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]

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