Can't resolve 'vue-class-component'

[Tom van Diggelen]

A colleague of mine created this issue: https://github.com/syncfusion/ej2-vue-ui-components/issues/86

@syncfusion/ej2-vue-navigation@19.4.55 is completely broken. Your code requires the vue-class-component dependency but it's not noted as (peer)dependency by your package.json

ERROR in ./node_modules/@syncfusion/ej2-vue-navigations/src/toolbar/items.directive.js 21:0-44
Module not found: Error: Can't resolve 'vue-class-component' in 'C:\KUBUSRepository\BIMcollab.WebComponents\branches\WC_WEB-3317-Node16Support\node_modules\@syncfusion\ej2-vue-navigations\src\toolbar'
 @ ./node_modules/@syncfusion/ej2-vue-navigations/src/index.js 4:0-99 4:0-99 4:0-99 4:0-99 4:0-99
 @ ./node_modules/@syncfusion/ej2-vue-navigations/index.js 4:0-28 4:0-28
 @ ./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/Pivot.vue?vue&type=script&lang=js& 88:0-91:41 94:14-32 94:34-50 97:8-21
 @ ./src/components/Pivot.vue?vue&type=script&lang=js& 1:0-120 1:136-139 1:141-258 1:141-258
 @ ./src/components/Pivot.vue 2:0-57 3:0-52 3:0-52 10:2-8
 @ ./src/index.ts 10:0-45 14:0-173

ERROR in ./node_modules/@syncfusion/ej2-vue-navigations/src/toolbar/toolbar.component.js 24:0-46
Module not found: Error: Can't resolve 'vue-class-component' in 'C:\KUBUSRepository\BIMcollab.WebComponents\branches\WC_WEB-3317-Node16Support\node_modules\@syncfusion\ej2-vue-navigations\src\toolbar'
 @ ./node_modules/@syncfusion/ej2-vue-navigations/src/index.js 5:0-78 5:0-78 5:0-78
 @ ./node_modules/@syncfusion/ej2-vue-navigations/index.js 4:0-28 4:0-28
 @ ./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/Pivot.vue?vue&type=script&lang=js& 88:0-91:41 94:14-32 94:34-50 97:8-21
 @ ./src/components/Pivot.vue?vue&type=script&lang=js& 1:0-120 1:136-139 1:141-258 1:141-258
 @ ./src/components/Pivot.vue 2:0-57 3:0-52 3:0-52 10:2-8
 @ ./src/index.ts 10:0-45 14:0-173

ERROR in ./node_modules/@syncfusion/ej2-vue-navigations/src/treeview/treeview.component.js 23:0-46
Module not found: Error: Can't resolve 'vue-class-component' in 'C:\KUBUSRepository\BIMcollab.WebComponents\branches\WC_WEB-3317-Node16Support\node_modules\@syncfusion\ej2-vue-navigations\src\treeview'
 @ ./node_modules/@syncfusion/ej2-vue-navigations/src/index.js 11:0-82 11:0-82 11:0-82
 @ ./node_modules/@syncfusion/ej2-vue-navigations/index.js 4:0-28 4:0-28
 @ ./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/Pivot.vue?vue&type=script&lang=js& 88:0-91:41 94:14-32 94:34-50 97:8-21
 @ ./src/components/Pivot.vue?vue&type=script&lang=js& 1:0-120 1:136-139 1:141-258 1:141-258
 @ ./src/components/Pivot.vue 2:0-57 3:0-52 3:0-52 10:2-8
 @ ./src/index.ts 10:0-45 14:0-173

If your code requires it, it should be noted as a dependency or peerDependency.

Even adding vue-class-components@7.2.6 gives import errors.

I refuse to add vue-class-componentsv8.0.0-rc.1 as it's a release candidate and it's a vue3 package.

[Massé Matthieu]

Hi,

@syncfusion/ej2-vue-gantt@19.4.55 is also broken.

We have a frozen version of gantt component in production and when we have to rebuild to fix some things, we discover it's not possible to maintain our product anymore because this dependency is broken.

We spend a lot of time to upgrade syncfusion dependencies because we want to have a strong process of non-regression analysis. It's not possible to not fix your dependencies on frozen packages, it causes major issues and implies huge risks!

Now we have to dig deep into syncfusion packages to find the right sub-dependency to freeze (2 days and we are still digging).

[Massé Matthieu]

Hi,

Any news for this major break ?

We have important hotfix to deploy and have no information how to make  @syncfusion/ej2-vue-gantt@19.4.55 work.

We are blocked since 8th of july for Hot

[Ravikumar Venkatesan]

Hi Tom/Massé,

Greetings from Syncfusion support.

Q1: Can't resolve 'vue-class-component'

We have validated your reported query at our end. We suspect that the root cause of the problem is due to the duplicate packages in the node_modules. We have prepared a working sample for your reference.

Kindly follow the below steps to remove the duplicate packages and cache.

1. Remove the cap (^) symbol before the version number and use the mentioned symbol (~) before the version number like ("@syncfusion/ej2-vue-navigations": "~19.4.56").
2. Delete the @Syncfusion folder from node_modules and the package-lock.json file from the root folder.
3. Clear npm cache at your end.
4. Run the "npm install —legacy-peer-deps" command to install the packages.

Kindly try the shared sample and let us know if you need any further assistance.

Q2: @syncfusion/ej2-vue-gantt@19.4.55 is also broken

We have created a new forum “Vue Gantt - Branched from 176099” under your account to follow up on your query. We suggest you follow up with the new forum for further updates.

Regards,

Ravikumar Venkatesan

Attachment: ej2vue2toolbarsample_80bddcff.zip