question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: fail build vue app in last update with vite

See original GitHub issue

Prerequisites

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<StringConstructor> 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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:17 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
liamdebeasicommented, Jun 22, 2022

Also, as per my comment in https://github.com/ionic-team/ionic-framework/issues/25485#issuecomment-1157699538, 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 https://github.com/ionic-team/ionic-framework/issues/24169.

2reactions
liamdebeasicommented, Jun 22, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting - Vite
Vite cannot handle and does not support code that only runs on non-strict mode (sloppy mode). This is because Vite uses ESM and...
Read more >
Vue.js Vite app works in development but crashes after building
I built the app with npm run build but the app doesn't work anymore. I am getting a blank page with an error...
Read more >
Deployment - Vue CLI
Create a new Static Site on Render, and give Render's GitHub app permission to access your Vue repo. Use the following values during...
Read more >
Vue JavaScript Tutorial in Visual Studio Code
Vue JavaScript tutorial showing IntelliSense, debugging, and code navigation support in the ... You can now create a new Vue.js application by typing:...
Read more >
Asset Bundling (Vite) - The PHP Framework For Web Artisans
Have you started a new Laravel application using our Vite scaffolding but need ... Or, running the build command will version and bundle...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found