bug: ion-select has errors binding to object but only when using Vite starter

[kensodemann]

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

v7.x

Current Behavior

I am using an object binding with an ion-select like such:

        <ion-select v-model="provider" :compare-with="compareKVPair" label="Auth Config">
          <ion-select-option v-for="p of providers" :value="p" :key="p.key">{{ p.value }}</ion-select-option>
        </ion-select>

Where provider is const provider = ref<Provider>(); and Provider is a simple "key-value" interface.

With a vite based project, the project can be run just fine in the dev server (npm run dev) but fails with the following error when doing a build (npm run build):

ken@Kens-MBP:~/Projects/Issues/vue-vite-obj-select|main ⇒  npm run build

> ionic-app-base@0.0.0 build
> vue-tsc && vite build

src/views/HomePage.vue:11:21 - error TS2322: Type 'Provider | undefined' is not assignable to type 'string | number | boolean | undefined'.
  Type 'Provider' is not assignable to type 'string | number | boolean | undefined'.

11         <ion-select v-model="provider" :compare-with="compareKVPair" label="Auth Config">
                       ~~~~~~~

  node_modules/@ionic/vue/dist/types/vue-component-lib/utils.d.ts:2:5
    2     modelValue?: T;
          ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'ComponentProps<DefineComponent<IonSelect & InputProps<string | number | boolean>, object, {}, ComputedOptions, MethodOptions, ComponentOptionsMixin, ... 5 more ..., { ...; }>>'


Found 1 error in src/views/HomePage.vue:11

The app itself works perfectly fine in the browser when run from the dev server.

For a vue-cli project, object bindings in an ion-select build both for the dev server (npm run serve) and the build (npm run build), no errors with either.

In either case (vite or vue-cli) I do get the type error in the editor.

Expected Behavior

This should build in a vite project just as it does in a vue-cli project (or just as it does in either project's dev server)

Steps to Reproduce

1. Grab this: https://github.com/kensodemann/vue-cli-obj-select
2. npm i
3. npm run serve - should build and work
4. npm run build - should build and work if you so choose to serve it up

This with Vite

1. Grab this: https://github.com/kensodemann/vue-vite-obj-select
2. npm i
3. npm run dev - should build and work
4. npm run build - should result in error mentioned above

Code Reproduction URL

https://github.com/kensodemann/vue-vite-obj-select

Ionic Info

Taken from the vue-cli project as I don't have the new CLI that understands vue-vite as a project type yet...

Ionic:

   Ionic CLI       : 6.20.9 (/Users/ken/.volta/tools/image/packages/@ionic/cli/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 7.0.0

Capacitor:

   Capacitor CLI      : 4.7.1
   @capacitor/android : not installed
   @capacitor/core    : 4.7.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.2

System:

   NodeJS : v18.13.0 (/Users/ken/.volta/tools/image/node/18.13.0/bin/node)
   npm    : 9.3.1
   OS     : macOS Unknown

Additional Information

No response

[kensodemann]

Minor update now that I have CLI v7

ken@Kens-MBP:~/Projects/Issues/vue-test|main⚡ ⇒  ionic build
> vite build
vite v4.2.1 building for production...
✓ 187 modules transformed.
dist/index.html                           1.00 kB
dist/assets/index-dd57a636.css           27.76 kB │ gzip:   5.24 kB
dist/assets/status-tap-8050c01c.js        0.48 kB │ gzip:   0.34 kB
dist/assets/swipe-back-742efd4e.js        0.68 kB │ gzip:   0.47 kB
dist/assets/focus-visible-56d4fbba.js     0.98 kB │ gzip:   0.50 kB
dist/assets/md.transition-fda62092.js     1.03 kB │ gzip:   0.57 kB
dist/assets/keyboard-78b51126.js          1.20 kB │ gzip:   0.60 kB
dist/assets/index9-7124270f.js            1.85 kB │ gzip:   0.91 kB
dist/assets/input-shims-f51c7ba2.js       4.62 kB │ gzip:   2.07 kB
dist/assets/ios.transition-2c7f43f9.js    9.47 kB │ gzip:   2.69 kB
dist/assets/index-28b891ee.js           440.31 kB │ gzip: 106.51 kB
✓ built in 3.25s
ken@Kens-MBP:~/Projects/Issues/vue-test|main⚡ ⇒  npm run build

> vue-test@0.0.1 build
> vue-tsc && vite build

src/views/HomePage.vue:11:21 - error TS2322: Type 'Provider | undefined' is not assignable to type 'string | number | boolean | undefined'.
  Type 'Provider' is not assignable to type 'string | number | boolean | undefined'.

11         <ion-select v-model="provider" :compare-with="compareKVPair" label="Auth Config">
                       ~~~~~~~

  node_modules/@ionic/vue/dist/types/vue-component-lib/utils.d.ts:2:5
    2     modelValue?: T;
          ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'ComponentProps<DefineComponent<IonSelect & InputProps<string | number | boolean>, object, {}, ComputedOptions, MethodOptions, ComponentOptionsMixin, ... 5 more ..., { ...; }>>'


Found 1 error in src/views/HomePage.vue:11

ken@Kens-MBP:~/Projects/Issues/vue-test|main⚡ ⇒

The ionic build command works fine.

It seems to be vue-tsc and also the TypeScript Language Services in the editor that show the error.

[liamdebeasi]

Does this only happen with ion-select, or can you reproduce this with other form components such as ion-input?

[kensodemann]

Same basic behaviour with ion-input

[liamdebeasi]

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

[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.