Vue2 compatibility

[David Di Donato]

Hello there,

I've upgraded my project to use the latest components:

"@syncfusion/ej2-vue-charts": "^20.2.36"

When I open my page, there is an error:

[Vue warn]: Failed to mount component: template or render function not defined.

Are the latest version not compatible with Vue2:

"vue": "^2.7.0"

I couldn't find anything in the docs. Can you please clarify which version we should use with Vue2? Thanks in advance!

[Durga Gopalakrishnan]

Hi David,

Greetings from Syncfusion.

We request you to install the vue-class-component version as 8.0.0-rc.1 and vue version as 2.6.14 to work with Vue 2 charts. We have prepared sample for your reference. Please ensure whether below dependencies are included in package.json file in your application.

"dependencies": {   

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

      "vue": "^2.6.14",

      "vue-class-component": "^8.0.0-rc.1" //install the vue-class-component 

  }

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Chart-1835398938.zip

UG : https://ej2.syncfusion.com/vue/documentation/chart/getting-started/

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Massé Matthieu]

Hi,

We are facing the exact same issue on gantt.

The proposed solution doesn't work. If we change vue-class-component to this rc, we have this error :

I don't understand why 20.2.36 worked fine 5 days ago not with vue-class-component 7.2.6 and not working now.

Regards

[Denny]

Same here, here's a repository for reproducing the issue.

https://github.com/dennybiasiolli/vue27-syncfusion-bug

Same problem with 20.1 and 20.2.

Upgrading to Vue.js 2.7 is really helpful for migrating to Vue.js 3.x in future, but this makes it impossible...

[Durga Gopalakrishnan]

Hi Denny,

We are validating your reported scenarios. We will update the further details within two business days(12th July 2022). We appreciate your patience until then.

Regards,

Durga Gopalakrishnan.

[Denny]

Thank you, I just updated the repo with usage of Vue 2.7.4, but no luck with that.

I've also opened an issue in the vuejs/vue repo here, to check if there is a problem within Vue 2.7.x itself

[Massé Matthieu]

Hi,

Any news ? We are facing High priority regressions due to problems on frozen versions of vue gantt not totally frozen apparently (https://www.syncfusion.com/forums/176099/cant-resolve-vue-class-component)

We are looking for solutions on 19.4.55 or 20.2.xx. No matter the version, we will manage the necessary developments. But we need solutions please.

Thanks in advance.

Regards,

Matthieu

[Swetha Babu]

Hi Denny,

Thanks for the update,

In the newer version of Vue 2.7.x they have introduced some breaking changes which needs to be addressed in the Syncfusion Vue component's. So we have planned to add compatibility of Vue components with updated new Vue version and it will be added in our upcoming Volume 3 release. We will keep you update about this issue in the below feedback link.

https://www.syncfusion.com/feedback/36253/need-to-provide-compatibility-for-syncfusion-components-to-vue-2-7

Please get back to us if you have any queries.

Regards,

Ragunath S

[David Di Donato]

Thank you for your response. We are using Version 19.1.69 until this issue is resolved.

[Durga Gopalakrishnan]

Hi David,

Most welcome. We will include the compatibility feature as per mentioned timeline. We appreciate your patience until then.

Regards,

Durga Gopalakrishnan.

[Jack Hammond]

This is absolutely critical for several of our projects as well. We've been using SyncFusion without issue for a while, but this is proving to be quite a serious blocker for us; do we have any idea on when we can expect this compatibility to be released as I'm surprised there are breaking changes in a non-major version bump when a lot of our internal components were migrated without issue.

[Durga Gopalakrishnan]

Hi Jack,

We will include the reported feature in our upcoming Volume 3 Main Release which is expected to be rolled out at end of September 2022. We appreciate your patience until then.

Regards,

Durga Gopalakrishnan.

[Massé Matthieu]

Hi Durga,

Just to have a clear answer on this topic.

What you are saying is :

• Syncfusion has no solution for that major regression at short time,
• Syncfusion won't work on any solution to solve this at short time,
• Syncfusion recommend to downgrade to 19.1.69​, so to roll-back to more than one year of improvements and fixes
• All products using Syncfusion VueJS components have to wait for 3 months to be able to go back to 20.x version
• Syncfusion teams will continue to publish weekly nuget releases for 3 months (~8 releases) even if these components cannot be used with VueJS 2

Is that correct ?

Just to update our customers and development labs and partners with a clear information.

Thanks in advance,

Regards.

[Marco Rizzato]

Hi,

I've the same Issue:

The thing that scares me is that I'm using version 19.4.52 and I haven't done any update to the packages in the last 3 months. It seems that version 20.2.36 broke something but how is it possible that this affects older versions?

In my local environment I didn't notice the issue because I had the npm packages cached, in the staging server on the other hand when the automatic pipeline started the problem showed up (obviously by clearing the cache in my environment the problem showed up locally as well).

I need an urgently solution, no version seems to be working.

Thanks in advance,
Regards.

[Ragunath Sukumaran]

Hi Marco,

Sorry for the inconvenience caused,

This issue is not occurred due to the version upgrade of the Syncfusion components. This is caused because vue have release a new version for vue 2 i.e.(v2.7.x) in the 1^st July 2022. In the newer version of Vue 2.7.x they have introduced some breaking changes which needs to be addressed in the Syncfusion Vue components. So if you install the vue 2.6.14 version, this issue will be resolved.

Make sure that you have not mentioned the cap(^) symbol in the package.json for mentioning the vue version. If you mention cap(^) symbol in the vue version in will install the latest version i.e.(v2.7.x). So please remove the cap(^) symbol or use tilde(~) symbol instead of cap(^) symbol. Please refer the below code snippet for using tidle symbol in the package.json file.

"vue": "~2.6.14"

we have planned to add compatibility of Vue components with updated new Vue version and it will be added in our upcoming Volume 3 2022 release, which is scheduled to roll out in the end of September.

Please get back to us if you have any queries.

Regards,
Ragunath S

[Marco Rizzato]

Thanks Ragunath,

your suggestion resolved the issue.

Regards,

Marco

[Theveshwar Jayakumar]

Hi Marco,

Thanks for the update.

Please get back to us if you have any queries.

Regards,

Theveshwar