storybookjs/storybook

[Bug]: TypeScript 5.5 breaks components using generic forwardRef

Open

#28605 opened on Jul 15, 2024

View on GitHub
 (5 comments) (3 reactions) (1 assignee)TypeScript (89,909 stars) (10,058 forks)batch import
bughelp wantedtypescript

Description

Describe the bug

Upgrading to TypeScript 5.5 gives the following error:

src/Test.stories.tsx(7,3): error TS2322: Type '<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode' is not assignable to type 'ComponentType<Record<string, unknown> extends Required<ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>> ? any : ComponentProps<...>> | undefined'.
  Type '<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode' is not assignable to type 'FunctionComponent<Record<string, unknown> extends Required<ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>> ? any : ComponentProps<...>>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'Record<string, unknown> extends Required<ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>> ? any : ComponentProps<...>' is not assignable to type 'TestProps<ElementType> & RefAttributes<HTMLDivElement>'.
        Type 'ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>' is not assignable to type 'TestProps<ElementType> & RefAttributes<HTMLDivElement>'.
          Type '{} | (TestProps<ElementType> & RefAttributes<HTMLDivElement>)' is not assignable to type 'TestProps<ElementType> & RefAttributes<HTMLDivElement>'.
            Type '{}' is not assignable to type 'TestProps<ElementType> & RefAttributes<HTMLDivElement>'.
              Property 'test' is missing in type '{}' but required in type 'TestProps<ElementType>'.
                Type 'ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>' is not assignable to type 'TestProps<ElementType>'.
                  Type '{} | (TestProps<ElementType> & RefAttributes<HTMLDivElement>)' is not assignable to type 'TestProps<ElementType>'.
                    Type '{}' is not assignable to type 'TestProps<ElementType>'.
                      Type 'Record<string, unknown> extends Required<ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>> ? any : ComponentProps<...>' is not assignable to type 'TestProps<ElementType>'.
                        Type 'ComponentProps<(<T extends ElementType>(props: TestProps<T> & RefAttributes<HTMLDivElement>) => ReactNode)>' is not assignable to type 'TestProps<ElementType>'.
                          Type '{} | (TestProps<ElementType> & RefAttributes<HTMLDivElement>)' is not assignable to type 'TestProps<ElementType>'.
                            Property 'test' is missing in type '{}' but required in type 'TestProps<ElementType>'.
src/Test.stories.tsx(13,14): error TS2322: Type '{ args: { test: string; }; }' is not assignable to type 'Story'.

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

  1. Go to the above link
  2. Run npm run build

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm

Additional context

No response

Contributor guide