search

syncfusion / ej2-vue-ui-components

Syncfusion Vue UI component library offer more than 50+ cross-browser, responsive, and lightweight vue UI controls for building modern web applications.
https://www.syncfusion.com/vue-ui-components
Other
295 stars 63 forks source link

Can't resolve vue-class-componentin 19.4.56 #86

Closed stam closed 2 years ago

stam commented 2 years ago

Hey, we were upgrading several vue components from 19.3.48 to 19.4.56 because of Node 16 issues and we encountered more problems.

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

In @syncfusion/ej2-vue-navigations somwhere between 19.3.46 and 19.4.55 you have removed the vue-class-component from your package json, but you are still relying on it in your code.

The packages we use are 

   "@syncfusion/ej2-locale": "19.3.45",
    "@syncfusion/ej2-pivotview": "19.4.55",
    "@syncfusion/ej2-vue-buttons": "19.4.55",
    "@syncfusion/ej2-vue-dropdowns": "19.4.56",
    "@syncfusion/ej2-vue-grids": "19.4.56",
    "@syncfusion/ej2-vue-navigations": "19.4.55",
    "@syncfusion/ej2-vue-pivotview": "19.4.55",
    "@syncfusion/ej2-vue-splitbuttons": "19.4.52",
ravikumar-venkatesan-m commented 2 years ago

Hi stam,

Q: Can't resolve vue-class-component in 19.4.56 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.

Sample: https://www.syncfusion.com/downloads/support/forum/176099/ze/ej2vue2toolbarsample_80bddcff

Regards, Ravikumar Venkatesan