Questions on Kendo UI for Vue Forum

2 questions

0 answers

671 views

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

Followed the below steps:

pnpm create vite
give name for project, select vue-ts template
pnpm install @progress/kendo-vue-popup @progress/kendo-licensing
Change App.vue as mentioned below
pnpm dev (works)
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>