Installing storybook breaks Typescript JSX types for Vue3 (Vite project)

[jmeyers91]

Describe the bug
After installing Storybook in a Vue3 Vite project, the project no longer builds due to JSX type conflicts. After installing storybook using the recommended command, the npm run build script produces these errors:

src/App.vue:9:4 - error TS2786: '__VLS_8' cannot be used as a JSX component.
  Its instance type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; }...' is not a valid JSX element.
    Type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; }...' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

9   <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
     ~~~~~~~~~~

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:1493: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.

1493     interface Element extends VNode {}
                   ~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1493: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.

1493     interface Element extends VNode {}
                   ~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1493: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.

1493     interface Element extends VNode {}
                   ~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1500: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 ''aria-relevant'' are incompatible.
          Type '"all" | "text" | "additions" | "additions text" | "removals" | "additions removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined' is not assignable to type '"all" | "text" | "additions" | "additions text" | "removals" | undefined'.
            Type '"additions removals"' is not assignable to type '"all" | "text" | "additions" | "additions text" | "removals" | undefined'.

1500     interface IntrinsicElements extends NativeElements {
                   ~~~~~~~~~~~~~~~~~

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

1505     interface IntrinsicAttributes extends ReservedProps {}
                   ~~~~~~~~~~~~~~

To Reproduce

My reproduction repo is here: https://github.com/jmeyers91/vue3-ts-storybook-error
Clone it and run npm install; npm run build to reproduce.
You can also re-create the repo and reproduce the error by running these commands:

mkdir vite-vue3-storybook
cd vite-vue3-storybook
npm init vite@latest . -- --template vue-ts
npx sb@next init --builder storybook-builder-vite
npm run build

System

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.4.1 - ~/.nvm/versions/node/v16.4.1/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v16.4.1/bin/yarn
    npm: 7.18.1 - ~/.nvm/versions/node/v16.4.1/bin/npm
  Browsers:
    Chrome: 94.0.4606.61
    Firefox: 92.0
    Safari: 15.0
  npmPackages:
    @storybook/addon-actions: ^6.4.0-beta.3 => 6.4.0-beta.3
    @storybook/addon-essentials: ^6.4.0-beta.3 => 6.4.0-beta.3
    @storybook/addon-links: ^6.4.0-beta.3 => 6.4.0-beta.3
    @storybook/vue3: ^6.4.0-beta.3 => 6.4.0-beta.3

[arpadgabor]

Can confirm this issue.

[johnsoncodehk]

See vuejs/language-tools#552 (comment)

[HIMISOCOOL]

can @types/react be an optional dependency instead?

[euaaaio]

A simple reproduction from a real project: https://github.com/euaaaio/repro-storybook-vue-volar-jsx

[mesqueeb]

+1 I've got the same issue!

[chriamue]

Using vite/client as types in tsconfig.json helped me.

vuejs/language-tools#552 (comment)

{
  "compilerOptions": {
    "target": "esnext",
...
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "vite/client"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[iamandrewluca]

This may help
vuejs/language-tools#592 (comment)

[IanVS]

Hi, can anyone confirm if this is still an issue in the latest version of @storybook/builder-vite?

[IanVS]

I believe this is now fixed in the latest storybook 7.0 versions. I'm going to close this out to try to keep things organized, but let me know if you're still having trouble and we can re-open.

[rashagu]

This issue has reappeared since version 7.2

···
Error: ../../node_modules/.pnpm/[email protected][email protected]/node_modules/vue/jsx.d.ts(8,22): 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.
Error: ../../node_modules/.pnpm/[email protected][email protected]/node_modules/vue/jsx.d.ts(8,22): 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.
Error: ../../node_modules/.pnpm/[email protected][email protected]/node_modules/vue/jsx.d.ts(8,22): 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.
Error: ../../node_modules/.pnpm/[email protected][email protected]/node_modules/vue/jsx.d.ts(15,22): error TS2430: Interface 'IntrinsicElements' incorrectly extends interface 'NativeElements'.
Types of property 'a' are incompatible.
Type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>' is not assignable to type 'AnchorHTMLAttributes & ReservedProps'.
Type 'DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>' is not assignable to type 'AnchorHTMLAttributes'.
Types of property 'style' are incompatible.
Type 'CSSProperties' is not assignable to type 'StyleValue'.
Type 'Properties<string | number, string & {}>' is missing the following properties from type 'StyleValue[]': length, pop, push, concat, and 33 more.
Error: ../../node_modules/.pnpm/[email protected][email protected]/node_modules/vue/jsx.d.ts(15,22): error TS2590: Expression produces a union type that is too complex to represent.
Error: ../../node_modules/.pnpm/[email protected][email protected]/node_modules/vue/jsx.d.ts(20,22): error TS2320: Interface 'IntrinsicAttributes' cannot simultaneously extend types 'ReservedProps' and 'Attributes'.
Named property 'key' of types 'ReservedProps' and 'Attributes' are not identical.
Error: ../../node_modules/.pnpm/@types[email protected]/node_modules/@types/react/index.d.ts(115,51): error TS2344: Type 'C' does not satisfy the constraint 'ElementType'.
Type 'keyof IntrinsicElements | ForwardRefExoticComponent | (new (props: any) => Component<any, {}, any>) | ((props: any, context?: any) => ReactElement<...>)' is not assignable to type 'ElementType'.
Type 'number' is not assignable to type 'ElementType'.
Type 'C' is not assignable to type 'FunctionComponent'.
Type 'keyof IntrinsicElements | ForwardRefExoticComponent | (new (props: any) => Component<any, {}, any>) | ((props: any, context?: any) => ReactElement<...>)' is not assignable to type 'FunctionComponent'.
Type 'string' is not assignable to type 'FunctionComponent'.
Error: ../../node_modules/.pnpm/@types[email protected]/node_modules/@types/react/index.d.ts(116,49): error TS2344: Type 'C' does not satisfy the constraint 'ElementType'.
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
Error: Process completed with exit code 1.
···