[Bug]: subcomponents get type error

[c-vetter]

Describe the bug

See the repro. In short, when using subcomponents, I get this error:

src/stories/Header.stories.ts:11:5 - error TS2322: Type '({ primary, size, backgroundColor, label, ...props }: ButtonProps) => JSX.Element' is not assignable
to type 'ComponentType<unknown>'.
  Type '({ primary, size, backgroundColor, label, ...props }: ButtonProps) => JSX.Element' is not assignable to type 'FunctionComponent<unknown>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type 'unknown' is not assignable to type 'ButtonProps'.

Reproduction link

https://github.com/c-vetter/repro_storybook_subcomponents-type-error

Reproduction steps

1. npx storybook init
2. Add a subcomponent to a story
3. Boom! error

System

Storybook Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 20.12.2 - ~\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
    Yarn: 1.22.22 - ~\scoop\apps\yarn\current\bin\yarn.CMD
    npm: 10.5.0 - ~\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD <----- active
    pnpm: 8.15.4 - ~\scoop\apps\nvm\current\nodejs\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
  npmPackages:
    @storybook/addon-essentials: ^8.1.5 => 8.1.5
    @storybook/addon-interactions: ^8.1.5 => 8.1.5
    @storybook/addon-links: ^8.1.5 => 8.1.5
    @storybook/addon-onboarding: ^8.1.5 => 8.1.5
    @storybook/blocks: ^8.1.5 => 8.1.5
    @storybook/react: ^8.1.5 => 8.1.5
    @storybook/react-vite: ^8.1.5 => 8.1.5
    @storybook/test: ^8.1.5 => 8.1.5
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^8.1.5 => 8.1.5

Additional context

Looking for a solution, I came across #21253

By updating that one's repro, I was able to get it to work: https://github.com/c-vetter/repro_storybook_subcomponents-type-error/tree/alt/21253

I'm unsure as to what is the relevant difference, will update here with any findings.

[MarioSimou]

Any update on this?

[pierreburel]

The issue seems to come from the [ReactRenderer type].(https://github.com/storybookjs/storybook/blob/next/code/renderers/react/src/types.ts#L8)

Maybe we should do the same as in SvelteRenderer and fallback to any?

export interface ReactRenderer extends WebRenderer {
  component: ComponentType<this['T'] extends undefined ? any : this['T']>;
  storyResult: StoryFnReactReturnType;
  mount: (ui?: JSX.Element) => Promise<Canvas>;
}

or

export interface ReactRenderer extends WebRenderer {
  component: ComponentType<this['T'] extends Record<string, any> ? this['T'] : any>;
  storyResult: StoryFnReactReturnType;
  mount: (ui?: JSX.Element) => Promise<Canvas>;
}

Note: I'm really not familiar with this this['T'] pattern in TypeScript (introduced with this CSF3 change, cf. @storybook/csf).

Edit: this will be fixed if https://github.com/ComponentDriven/csf/pull/103 is merged.