Storybook doesn't work with clean vue-ts project

[WhyNotHugo]

Describe the bug

On a brand new Vue project, installing storybook messes up dependencies in a way that neither the Vue project, nor SB build.

To Reproduce

yarn create vite # pick vue, typescript
npx sb init --type vue3
yarn build  # fails

Output

root@589587cc6180:/src# yarn build
yarn run v1.22.15
warning package.json: No license field
$ vue-tsc --noEmit && vite build
node_modules/@types/react/index.d.ts:120:51 - error TS2344: Type 'C' does not satisfy the constraint 'ElementType<any>'.
  Type 'keyof IntrinsicElements | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any, context?: any) => ReactElement<...> | null)' is not assignable to type 'ElementType<any>'.
    Type 'number' is not assignable to type 'ElementType<any>'.
      Type 'C' is not assignable to type 'FunctionComponent<any>'.
        Type 'keyof IntrinsicElements | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any, context?: any) => ReactElement<...> | null)' is not assignable to type 'FunctionComponent<any>'.
          Type 'string' is not assignable to type 'FunctionComponent<any>'.

120         "ref" extends keyof ComponentPropsWithRef<C>
                                                      ~

node_modules/@types/react/index.d.ts:121:49 - error TS2344: Type 'C' does not satisfy the constraint 'ElementType<any>'.
  Type 'C' is not assignable to type 'FunctionComponent<any>'.

121             ? NonNullable<ComponentPropsWithRef<C>["ref"]> extends Ref<
                                                    ~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1497:15 - error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'.
  Named property 'key' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical.

1497     interface Element extends VNode {}
                   ~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1497:15 - error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'.
  Named property 'props' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical.

1497     interface Element extends VNode {}
                   ~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1497:15 - error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'.
  Named property 'type' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical.

1497     interface Element extends VNode {}
                   ~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1504:15 - error TS2430: Interface 'IntrinsicElements' incorrectly extends interface 'NativeElements'.
  Types of property 'a' are incompatible.
    Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>' is not assignable to type 'ElementAttrs<AnchorHTMLAttributes>'.
      Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>' is not assignable to type 'AnchorHTMLAttributes'.
        Types of property 'style' are incompatible.
          Type 'CSSProperties | undefined' is not assignable to type 'StyleValue | undefined'.
            Type 'CSSProperties' is not assignable to type 'StyleValue | undefined'.
              Type 'Properties<string | number, string & {}>' is not assignable to type 'CSSProperties'.
                Types of property 'columnCount' are incompatible.
                  Type 'ColumnCount | undefined' is not assignable to type 'ColumnCountProperty | undefined'.
                    Type 'string & {}' is not assignable to type 'ColumnCountProperty | undefined'.
                      Type 'string & {}' is not assignable to type '"unset"'.

1504     interface IntrinsicElements extends NativeElements {
                   ~~~~~~~~~~~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1509:15 - error TS2320: Interface 'IntrinsicAttributes' cannot simultaneously extend types 'ReservedProps' and 'Attributes'.
  Named property 'key' of types 'ReservedProps' and 'Attributes' are not identical.

1509     interface IntrinsicAttributes extends ReservedProps {}
                   ~~~~~~~~~~~~~~~~~~~


Found 7 errors.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

System

Note: I'm just working on a clean container, podman run -it --rm node bash.

Environment Info:

  System:
    OS: Linux 5.16 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 17.0.1 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.4.13 => 6.4.13
    @storybook/addon-essentials: ^6.4.13 => 6.4.13
    @storybook/addon-links: ^6.4.13 => 6.4.13
    @storybook/vue3: ^6.4.13 => 6.4.13

Additional context

Working on an empty container with a clean project, there's really nothing setup-specific here.

[WhyNotHugo]

Related to #16213, though my particular case does not use jsx, it's more vanilla.

[IanVS]

This is fixed in 7.0, in which we test vue 3 typescript projects on a daily basis.