1. Feedback
  2. Vue
  3. 36690

Welcome to the Vue feedback portal. We’re happy you’re here! If you have feedback on how to improve the Vue, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Unable to use the @syncfusion/ej2-vue-popups and other components

I keep getting errors when using the Syncfusion component with vue3 + Vite.  I  don't know if I need more configuration or if the recent Vue version doesn't work with Syncfusion. It works fine with React but not Vue.

example code below (after installation)

<script setup>
import { TooltipPlugin } from "@syncfusion/ej2-vue-popups";
</script>
<template>
<TooltipPlugin
   content="Settings"
    position="Top"
>
    <button
        type="button"
        style="background: blue; borderRadius:50%"
        class="text-3xl text-white p-3 hover:drop-shadow-xl hover:bg-light-gray"
        >
            Hover Me
     </button>
</TooltipPlugin>
</template>

 Errors are seen here 

✘ [ERROR] Could not resolve "vue-class-component"


    node_modules/@syncfusion/ej2-vue-base/src/component-base.js:18:22:

      18 │ import * as Vue3 from 'vue-class-component';

         ╵ ~~~~~~~~~~~~~~~~~~~~~


  You can mark the path "vue-class-component" as external to exclude it from the bundle, which will

  remove this error.


10:21:36 AM [vite] error while updating dependencies:

Error: Build failed with 4 errors:

node_modules/@syncfusion/ej2-vue-base/src/component-base.js:18:22: ERROR: Could not resolve "vue-class-component"

node_modules/@syncfusion/ej2-vue-popups/src/dialog/buttons.directive.js:21:22: ERROR: Could not resolve "vue-class-component"

node_modules/@syncfusion/ej2-vue-popups/src/dialog/dialog.component.js:25:24: ERROR: Could not resolve "vue-class-component"

node_modules/@syncfusion/ej2-vue-popups/src/tooltip/tooltip.component.js:23:24: ERROR: Could not resolve "vue-class-component"

    at failureErrorWithLog (C:\Users\dabik\vue-project\admin-dashboard\node_modules\esbuild\lib\main.js:1615:15)

    at C:\Users\dabik\vue-project\admin-dashboard\node_modules\esbuild\lib\main.js:1257:28

    at runOnEndCallbacks (C:\Users\dabik\vue-project\admin-dashboard\node_modules\esbuild\lib\main.js:1037:63)

    at buildResponseToResult (C:\Users\dabik\vue-project\admin-dashboard\node_modules\esbuild\lib\main.js:1255:7)

    at C:\Users\dabik\vue-project\admin-dashboard\node_modules\esbuild\lib\main.js:1368:14

    at C:\Users\dabik\vue-project\admin-dashboard\node_modules\esbuild\lib\main.js:669:9

    at handleIncomingPacket (C:\Users\dabik\vue-project\admin-dashboard\node_modules\esbuild\lib\main.js:766:9)

    at Socket.readFromStdout (C:\Users\dabik\vue-project\admin-dashboard\node_modules\esbuild\lib\main.js:635:7)

    at Socket.emit (node:events:513:28)

    at addChunk (node:internal/streams/readable:324:12)