forwardRef trips up docgen
Closed this issue · 11 comments
Describe the bug
When implementing a Component in the way described below, the Storybook Props block (created via react-docgen-typescript-loader
) only shows the following text:
"Cannot read property 'appearance' of undefined"
To Reproduce
Declare a component in way mentioned under "Code snippets".
Expected behavior
The Props block should display the corresponding Props.
Code snippets
Button.tsx
type ButtonProps = {
appearance?: "primary" | "secondary" | "ghost";
} & JSX.IntrinsicElements["button"];
const Button: RefForwardingComponent<HTMLButtonElement, ButtonProps> = React.forwardRef(({ appearance, ...otherProps}, ref) => (
<button>...</button>
))
Button.displayName = "Button";
Button.defaultProps = {
appearance: "primary"
};
Button.stories.tsx
import React from "react";
import { storiesOf } from "@storybook/react";
import { Button } from "./Button";
storiesOf("Button", module)
.addParameters({
component: Button
})
.add("primary", () => (
<Button appearance="primary">
My primary button!
</Button>
))
;
System:
package.json
"react-docgen-typescript-loader": "^3.3.0"
Update: Also tested with 3.6.0.
Tried out with both Storybook 5.2.5 and Storybook 5.3.0-beta.1
Using stories in the TSX file format but encountered the error also when using the JSX file format.
Component is in TSX format.
Please paste the results of npx -p @storybook/cli@next sb info
here.
System:
OS: macOS 10.15.1
CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
Browsers:
Chrome: 78.0.3904.97
Safari: 13.0.3
npmPackages:
@storybook/cli: ^5.3.0-beta.1 => 5.3.0-beta.1
Additional context
Used to work before introducing RefForwardingComponent
and React.forwardRef
Mirror issue on Storybook side: storybookjs/storybook#8881
Relevant issue in react-docgen: reactjs/react-docgen#267
This might be fixed with react-docgen 5.0.0-beta.1 which includes a pull request that is titled "Fully support forwardRef": reactjs/react-docgen#350
@jonathanherdt i ran into this issue as well. I dont think the react-docgen issue is related since this loader uses something else under the hood.
I was able to get the docgenInfo object to show up by destructuring forwardRef
and use it directly. e.g.
// bad
import React from 'react';
export const MyComponent = React.forwardRef<A, B>( ... )
// good
import React, { forwardRef } from 'react';
export const MyComponent = forwardRef<A, B>( ... )
`
This is not working for me, event with destructuring. Getting the cannot read property ... of undefined.
I'm on version 5.2.8
.
Can confirm that taking the forwardRef out displays all props correctly.
import React, { ElementType, forwardRef, Ref, ReactElement } from 'react'
export const Button = forwardRef(
(props: ButtonProps, ref: Ref<HTMLAnchorElement>) => {
...
}
)
@jeffcstock have you tried parameterizing your forwardRef invocation?
i.e. forwardRef<HTMLAnchorElement, ButtonProps>((props, ref) => { ... })
@awinograd thanks for your response, but yes I can confirm that doesn't help things. Same exact result. 😕
@jeffcstock no problem. sorry i wasn't more help!
@jeffcstock Storybook 5.3 was just released and fixes this for me. Maybe give it a shot?
That fixed it, thank you @jonathanherdt!
Closing this issue because of multiple reports that it's been resolved. Leave a message if it's still a problem.