bug: fail build vue app in last update with vite

[KANekT]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Error after update to last version in vue, example file:

node_modules/@ionic/vue/dist/types/components/IonIcon.d.ts

in 6.1.10-nightly.20220614

export declare const IonIcon: import("vue").DefineComponent<{
    color: StringConstructor;
    flipRtl: BooleanConstructor;
    icon: StringConstructor;
    ios: StringConstructor;
    lazy: StringConstructor;
    md: StringConstructor;
    mode: StringConstructor;
    name: StringConstructor;
    size: StringConstructor;
    src: StringConstructor;
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
    lazy?: string;
    mode?: string;
    ios?: string;
    md?: string;
    name?: string;
    color?: string;
    size?: string;
    icon?: string;
    src?: string;
    flipRtl?: boolean;
}>, {}>;

in 6.1.10-nightly.20220615

export declare const IonIcon: import("vue").DefineComponent<{
    color: StringConstructor;
    flipRtl: BooleanConstructor;
    icon: StringConstructor;
    ios: StringConstructor;
    lazy: StringConstructor;
    md: StringConstructor;
    mode: StringConstructor;
    name: StringConstructor;
    size: StringConstructor;
    src: StringConstructor;
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    color: StringConstructor;
    flipRtl: BooleanConstructor;
    icon: StringConstructor;
    ios: StringConstructor;
    lazy: StringConstructor;
    md: StringConstructor;
    mode: StringConstructor;
    name: StringConstructor;
    size: StringConstructor;
    src: StringConstructor;
}>>, {
    flipRtl: boolean;
}>;

Expected Behavior

<ion-icon slot="icon-only" :icon="icons.close" />

Type string is not assignable to type InferPropType
Type string is not assignable to type [StringConstructor] extends [Prop<infer V, infer D>] ? (unknown extends infer V ? IfAny<V, V, D> : V) : StringConstructor     
Type string is not assignable to type StringConstructor

Steps to Reproduce

vue-tsc --noEmit && vite build

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (C:\Users\KANekT\AppData\Roaming\npm\node_modules@ionic\cli)

Capacitor:

Capacitor CLI : 3.5.1
@capacitor/android : 3.5.1
@capacitor/core : 3.5.1
@capacitor/ios : 3.5.1

Utility:

cordova-res : not installed globally
native-run : 1.6.0

System:

NodeJS : v16.15.1 (C:\Program Files\nodejs\node.exe)
npm : 8.11.0
OS : Windows 10

Additional Information

No response

[reslear]

vue version?

[KANekT]

Vue 3

[liamdebeasi]

Thanks for the issue. Can you provide a GitHub repo that I can use to verify this behavior?

[reslear]

@KANekT это очевидно что 3, полная версия, и версия vite?

[reslear]

hi @liamdebeasi I have a similar problem, but not with build, but with volar vscode ext

repro https://github.com/reslear/ionic-vue-pnpm-express-monorepo

[liamdebeasi]

Ionic Vue does not support Volar. See: #24169

[KANekT]

@liamdebeasi @reslear i update to vite and last version repo:
https://github.com/KANekT/ion-menu-bug

i have warning in webstorm

and error in build

[liamdebeasi]

Thanks! I can reproduce this behavior, and I am investigating.

[liamdebeasi]

Can everyone try the following dev build and let me know if it resolve the issue?

npm install @ionic/[email protected] @ionic/[email protected]

[KANekT]

Yes it resolve this error

[liamdebeasi]

Thanks for the issue. This has been resolved via #25499, and a fix will be available in an upcoming release of Ionic Framework.

[kachidk]

Ionic Vue does not support Volar. See: #24169

Is there a recommendation on what to use instead?

[reslear]

@kachidk volar is support, but without html types, i'm use everyday - no problems

[kachidk]

I have a similar problem, but not with build, but with volar vscode ext

I have this same problem similar to you have did you solve it

[liamdebeasi]

Hi everyone,

This issue was resolved in Ionic 6.1.11. Please update to the latest version of Ionic Vue to receive a fix for this issue.

[liamdebeasi]

Also, as per my comment in #25485 (comment), Volar support should be improved in Ionic 6.1.11. Please give it a try and let us know if you run into any issues on #24169.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.