Open andrew-pledge-io opened 1 month ago
Disclaimer This information might be inaccurate, due to it being generated automatically
To resolve the TypeScript 5.5 issue with generic forwardRef
, update the Button
component in /code/renderers/react/template/stories/docgen-components/8894-9511-ts-forward-ref/input.tsx
as follows:
import React, { forwardRef, ElementType, RefAttributes } from 'react';
interface ButtonProps<T extends ElementType> {
as?: T;
disabled?: boolean;
variant?: 'primary' | 'secondary';
}
const Button = forwardRef<HTMLButtonElement, ButtonProps<ElementType>>((props, ref) => {
const { as: Component = 'button', disabled, variant, ...rest } = props;
return <Component ref={ref} disabled={disabled} className={variant} {...rest} />;
});
Button.displayName = 'Button';
export default Button;
Ensure that the ButtonProps
interface and forwardRef
usage align with the updated TypeScript 5.5 requirements.
/code/renderers/react/template/stories/docgen-components/8894-9511-ts-forward-ref /code/renderers/react/template/stories/docgen-components/8143-ts-react-fc-generics /code/renderers/react/template/stories/docgen-components/ts-react-fc
Hi @andrew-pledge-io
Thank you for the report! Would you mind opening a PR to fix these issues?
I did some investigation: https://github.com/microsoft/TypeScript/issues/59490
So now I'm using this:
const meta = {
component: SomeComponent,
} satisfies Meta<SomeComponentProps>; // instead of using `typeof SomeComponent`;
Describe the bug
Upgrading to TypeScript 5.5 gives the following error:
The error is only on components that use the "generic forwardRef" pattern (described here in the React TypeScript cheat sheet).
This pattern is fairly common in component libraries as it's required to support generics on components using
forwardRef
.The error isn't present in TypeScript 5.4. It's also not present in TypeScript 5.5 when using
forwardRef
as imported directly from React.Reproduction link
https://stackblitz.com/edit/vitejs-vite-gwnmdk?file=src%2FTest.stories.tsx&view=editor
Reproduction steps
npm run build
System
Additional context
No response