Vue: Unresolvable type: TSConditionalType

[amritk]

Describe the bug When using CVA (both beta and the stable version) with vue SFC I get an error:

[plugin:vite:vue] [@vue/compiler-sfc] Unresolvable type: TSConditionalType

/home/amritk/apps/pulls/vue-project/node_modules/cva/dist/index.d.ts
2  |  type ClassDictionary = Record<string, any>;
3  |  type ClassArray = ClassValue[];
4  |  type OmitUndefined<T> = T extends undefined ? never : T;
   |                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5  |  type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
6  |  type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;

/home/amritk/apps/pulls/vue-project/src/components/HelloWorld.vue

To Reproduce Checkout https://github.com/amritk/cva-error Its a new create vue app with cva added

1. install dependencies and run dev
2. See error

Expected behavior No error

Screenshots

Desktop (please complete the following information):

• OS: Linux
• Browser Firefox
• Version Beta and Stable

Additional context Looks like there is an open vue issue and PR

[joe-bell]

Yikes, seems like this isn't unique to cva

I'm not sure I like the idea of having to patch around this just because Vue's compiler doesn't support it 🤔

[amritk]

But then it wouldn't be working at all in vue right? Has it been working?

[joe-bell]

There are CI checks in place for Vue and nothing has flagged up https://github.com/joe-bell/cva/blob/main/.github/workflows/ci.yml#L20

There's also an example, and nothing has flagged up https://stackblitz.com/edit/joe-bell-cva-ocexjv?file=src%2Fcomponents%2FButton.vue

I don't really like the idea of changing something that seems to be working fine for all other TypeScript-based frameworks just because Vue's compiler has a specific use-case 😕

[amritk]

Yes thats true, let me see why the examples working

[amritk]

So the problem was with trying to this

withDefaults(
  defineProps<
    {
      title?: string
    } & FlowAlertProps
  >(),
  {
    type: 'info',
  },
)

instead of this

withDefaults(
  defineProps<{
    title?: string
    type: FlowAlertProps['type']
  }>(),
  {
    type: 'info',
  },
)

Thanks for the help @joe-bell