Vite + TS + @progress/kendo-vue-popup: type errors on prod build

[Shashwat]

Followed the below steps:

1. pnpm create vite
2. give name for project, select vue-ts template
3. pnpm install @progress/kendo-vue-popup @progress/kendo-licensing
4. Change App.vue as mentioned below
   
5. pnpm dev (works)
6. pnpm build (fails with type errors)

I have also added a sample project on github

Am I missing something?

Type errors:

c:\temp\kendo-popup-with-vite>pnpm build

> kendo-popup-with-vite@0.0.0 build c:\temp\kendo-popup-with-vite
> vue-tsc --noEmit && vite build

node_modules/.pnpm/@progress+kendo-vue-popup@2.7.1_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:2:57 - error TS2307: Cannot find module 'vue/types/options' or its corresponding type declarations.

2 import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
                                                          ~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/@progress+kendo-vue-popup@2.7.1_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:63:72 - error TS2304: Cannot find name 'Vue'.

63 export interface PopupAll extends PopupMethods, PopupState, PopupData, Vue {
                                                                          ~~~

node_modules/.pnpm/@progress+kendo-vue-popup@2.7.1_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:68:37 - error TS2304: Cannot find name 'Vue'.

68 declare let Popup: ComponentOptions<Vue, DefaultData<PopupData>, DefaultMethods<PopupAll>, {}, RecordPropsDefinition<PopupProps>>;
                                       ~~~


Found 3 errors.

 ELIFECYCLE  Command failed with exit code 2.

App.vue

<script lang="ts">
import { defineComponent } from 'vue';
import { Popup } from '@progress/kendo-vue-popup';

export default defineComponent({
  components: {
    'k-popup': Popup,
  },
  data() {
    return {
      show: false,
    }
  },
  methods: {
    onClick() {
      this.show = !this.show;
    }
  }
});

</script>

<template>
  <div>
    <button class="k-button" @click="onClick" ref="buttonWithPopup">Click Me</button>
    <k-popup :anchor="'buttonWithPopup'" :show="show">Popup content.</k-popup>
  </div>
</template>

[Plamen]

Hi, 

The reason behind the issue is the fact the the default Popup is still using the Vue. 2 types. If you want to use Vue 3 types we currently recommend such import:

import { PopupVue3 as Popup } from '@progress/kendo-vue-popup';

In one of the next version of the components we will switch the default type to be the Vue3 one so this additional code will not be needed any more. 

 

Hope this will help you solve the issue.

As for the exact issue I was not able to observe it probably because of another node version or something else and when I tested the project I observed a bit different error:

If you still observe the issue please share the exact node version to test the project once again.

[Shashwat]

The error is unchanged even when I import PopupVue3 for me.

I am using Windows 10 (19044) and tested with node v16.13.1 and v17.3.0. Also tried "pnpm build" from WSL2 on Ubuntu with the same error using node v16.13.1.

 

[Plamen]

Thank you for elaborating the node version.  I could successfully replicate the issue - it seems like a bug at our side.

I have logged it at our public postal here - https://feedback.telerik.com/kendo-vue-ui/1548455-typescript-error-when-building-with-site-and-typescript

In version 2.7.2 we provided a fix for the Popup component - so you can check it yet we will need some more time to apply it for the other ones, too.

As a temporary workaround you can set "skipLibCheck": true, in the tsconfig.json file to avoid these errors.

Thank you once again fro reporting the issue - it is of great importance to Kendo UI for Vue project.

If you have further questions please let us know.