reactjs / reactjs/react-docgen
React/TypeScript - Connecting components to Zeplin components failed.
Open
Nobody has claimed this yet.
typescript
- Dominant language
- TypeScript
- Stars
- 3.8k
- Forks
- 316
- Avg merge
- 5h 7m
- Merged PRs (30d)
- 4
Description
Seems like I am having issues with ES6 imports, or TypeScript itself?
import React from "react";
import cls from "classnames";
import { IButtonProps } from "./types";
import "./Button.scss";
const baseclass = "button";
const Button = ({
...,
}: IButtonProps) => {
const classes = cls(
baseclass,
className,
...,
);
return (
<button
disabled={disabled}
className={classes}
type={type}
onClick={onClick}>
{children}
</button>
);
};
export default Button;
Results in following output issue:
Connecting components to Zeplin components failed.
Error occurred while processing src/components/atoms/Button/Button.tsx with @zeplin/cli-connect-react-plugin:
/Users/carlbowen/WebstormProjects/note/node_modules/@zeplin/cli-connect-react-plugin/dist/template/base.pug:18
16|
17| mixin propType(name, propType)
> 18| if propType.name === "union"
19| | #{name}={union[
20| +propertyValues(propType.value)
21| | }]
Cannot read property 'name' of undefined
My config file is as follows:
{
"plugins": [
{
"name": "@zeplin/cli-connect-react-plugin"
}
],
"projects": [],
"styleguides": [
"5cd486b18a..."
],
"components": [
{
"path": "src/components/atoms/Button/Button.tsx",
"zeplinNames": [
"Full Logo"
]
}
]
}
API versions in use:
"@zeplin/cli": "^1.0.0",
"@zeplin/cli-connect-react-plugin": "^0.2.3",
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the connection failure with src/components/atoms/Button/Button.tsx, the shown config, and the listed @zeplin CLI package versions. Read the plugin’s dist/template/base.pug around line 18 and inspect the component metadata reaching it; done means the Zeplin connection completes without the undefined propType error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- documentation, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100