Vite support in Syncfusion + Vue 3

[Andrew Mandruk]

Hello,

I'd like to use ViteJS instead of Web Pack in our project. 

You can read more about vite here :https://vitejs.dev/guide/

I tried to create a update project to use ViteJS but I always have errors.

node_modules/@syncfusion/ej2-vue-base/src/component-decorator.js:4:7: error: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

    4 │ import Vue from 'vue';

The error shown because Vue v3 has no default export member.

If the current code can support Vite, great! Can you provide a demo for it?

Thanks!

[Gokulraj Varatharajan]

Hi Andrew,  

 

Greetings from Syncfusion support, 

 

We have prepared a Vue3+ViteJS sample as per your scenario and able to replicate the issue. We have considered this as a bug and the fix for this issue will be included in our Volume 4 release which is expected to be rolled out by the month of December 2021.  

 

You can track the status through the below portal link.  

 

https://www.syncfusion.com/feedback/28933/need-to-provide-compatibility-vitejs-support-for-vue-components  

 

We appreciate your patience.  

 

Regards,  

Gokul

[Andrew Mandruk]

Hi, can I get access to the provided portal link? Now I am getting "Access Denied" page.

[Gokulraj Varatharajan]

Hi Andrew, 

 

We are unable to complete it as planned due to the complexity of issue we will include this fix with our Volume 4 SP1 release. 

 

We appreciate your patience until then. 

 

Regards, 

Gokul

[Gokulraj Varatharajan]

Hi Andrew, 

Thank you for your patience, 

We have resolved the compatibility issue of Vitejs with our Syncfusion Vue components in our latest package release (19.4.40). So, we are suggesting you upgrade your package to the latest version to avail of these changes. For your reference, we have developed a new Vitejs project that includes our Grid component in our latest package, and you can download and use the project from the following link. 

Release Notes: https://ej2.syncfusion.com/vue/documentation/release-notes/19.4.40/?type=all#common 

Project: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-vite-448695658 

You are kindly advised to follow the below steps while updating your packages. 

1. Delete the “@syncfusion” folder from the node_modules folder and “package-lock.json” files. 

2. Update all our packages to the latest version as “19.4.40” in the package.json file. 

3. Now run the “npm install” command to install the required package in your project. 

Please get back to us if you have any concerns. 

Regards, 

Gokul

[Dustin]

Hi,

this error still persists on the Schedule component. Using newest version and also 19.4.40.

[Gokulraj Varatharajan]

Hi Dustin, 

  

Greetings from Syncfusion support, 

  

We have validated your query, and we cannot replicate the reported issue at our end. We have developed a Vite + Vue 3 application with a Schedule component as per the requirement for your convenience. So, You can download and use it from the below project link. 

 

Project: Vite-schedule 

Please get back to us if you have any queries. 

Regards, 

Gokul

[Isaac]

Hi,

am getting the same error with @syncfusion/ej2-vue-querybuilder using  version 19.4.48.

[Gokulraj Varatharajan]

Hi Isaac, 

 

Greetings from Syncfusion support, 

 

There are no changes in the Querybuilder packages with your reported version. So, This package will not be available with the 19.4.48 version. We suggest you use the 19.4.47 version or "*" to utilize our latest packages. 

 

"@syncfusion/ej2-vue-querybuilder": "*", 

 

 

Please get back to us if you have any queries. 

 

Regards, 

Gokul 

[Anna Ivanova]

Hi,

I am getting this error in a newly created project.

vue - 3.2.37

vite - 3.0.0

@syncfusion/ej2-vue-buttons - 20.2.38

@syncfusion/ej2-vue-base - 20.2.38

[Ragunath Sukumaran]

Hi Anna,

For the vitejs version above v3.0.0, they have introduced a breaking changes that the vitejs above v3.0.0 will only run in the node version above 14.18.0. If you are using the node version below v14.18.0, you might face this issue. Please refer the below vitejs release notes.

Vitejs: https://github.com/vitejs/vite/blob/v3.0.0/packages/vite/CHANGELOG.md#300-beta9-2022-07-08

For your convenience we have prepared a sample in the vitejs version 3.0.0 and it is working fine at our end when using 14.18.3 node version. Please refer to the below sample.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-vitejs-582547777

Please get back to us if you have any queries.

Regards,

Ragunath S

[Steffen]

Hi,

I get this error with thee current grid component of syncfusion and can't make it work.

No matching export in "node_modules/.pnpm/[email protected]/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

Using the following packages:

"@syncfusion/ej2-vue-grids": "20.3.62",
"vue-class-component": "8.0.0-rc.1"
"vite": "3.0.9",

"vue": "3.2.38"

What needs to be changed?

Can not really switch to an older vue version as in your provided vite example because of other packages i also using? Is there another fix needed in your grid component?

[Anbumani Rajendracholan]

Hi Steffen,

 

After evaluating the query, we found that you are using pnpm platform in your application.  Currently, we don't have support for pnpm platform with our controls. So, we have planned already and logged the feature request from our side and it will be available in any of our future release.

 

https://www.syncfusion.com/feedback/38812/need-to-provide-our-vue-3-components-support-in-the-pnpm

 

Please get back to us if you need further assistance.

 

Regards,

Anbumani Rajendracholan