Error: Right-hand side of 'instanceof' is not callable

[Mehmet Ali SEKER]

Hi 

I am getting an error on browser console after include a new sync library.  for example I tried download listview component  but get up this error 

Is there any solution. I don't know if it is a common bug or only related to my development environment

package version 19.4.38

Uncaught TypeError: Right-hand side of 'instanceof' is not callable
    at EJcomponentFactory (webpack-internal:///./node_modules/@syncfusion/ej2-vue-lists/node_modules/@syncfusion/ej2-vue-base/src/component-decorator.js:117)
    at eval (webpack-internal:///./node_modules/@syncfusion/ej2-vue-lists/node_modules/@syncfusion/ej2-vue-base/src/component-decorator.js:53)
    at __decorate (webpack-internal:///./node_modules/@syncfusion/ej2-vue-lists/src/list-view/listview.component.js:31)
    at eval (webpack-internal:///./node_modules/@syncfusion/ej2-vue-lists/src/list-view/listview.component.js:184)
    at eval (webpack-internal:///./node_modules/@syncfusion/ej2-vue-lists/src/list-view/listview.component.js:195)
    at Module../node_modules/@syncfusion/ej2-vue-lists/src/list-view/listview.component.js (chunk-vendors.js:827)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./node_modules/@syncfusion/ej2-vue-lists/src/index.js:21)
    at Module../node_modules/@syncfusion/ej2-vue-lists/src/index.js (chunk-vendors.js:815)

[Indhumathy Loganathan]

Hi Mehmet, 

 

Greetings from Syncfusion support. 

 

We have prepared a Vue ListView sample in the specified package 19.4.38 version but we are unable to recreate the reported issue at our end. Please find the sample from below link. 

 

https://www.syncfusion.com/downloads/support/forum/171693/ze/sample-400191449 

 

We request you to share the below details. 

 

1.      Share the code snippet of ListView component. 

2.      Whether you have rendered the ListView component inside any other components. 

3.      If possible, replicate the issue in above shared sample. 

 

These details would help us to assist you promptly. Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Mehmet Ali SEKER]

Hi 

yes your project working properly but I noticed that you used to vue 3. I am using vue 2 and won't to upgrade  to vue 3. 

in vue 2 project I am still getting same error.

please can you look at  atttached example project

Attachment: listviewvue2_f0074063.rar

[Indhumathy Loganathan]

Hi Mehmet, 

 

Thanks for the shared sample. 

 

We can recreate the reported issue at our end. Currently, we are validating this issue and we need some additional time. We will update you with further details on January 13, 2022.  

 

We appreciate your patience. 

 

Regards, 

Indhumathy L 

[Indhumathy Loganathan]

Hi Mehmet, 

 

The reported issue occurs in the node 16 version due to the peer dependencies.  

 

We have considered this a bug, and the fix for the issue will be included in our weekly patch release by the end of January 2022. You can track the status through the below portal link. 

 

https://www.syncfusion.com/feedback/31873/facing-an-issue-while-running-listview-component-with-vue-2-in-node-16-8-0-v 

 

We appreciate your patience. 

 

Regards, 

Indhumathy L 

[Gokulraj Varatharajan]

Hi Mehmet,

Sorry for  the delayed response,

We are glad to announce that our weekly patch release (19.4.47v) is rolled out. The “Compilation issue while using the Vue-class-component with Vue 2 in node 16.8.0 V ” has been resolved in this release. To access this fix, we suggest you to update the package to the latest version 20.1.60 or later.

Find the below sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue-sample1747755024

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

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Gokul

[Tom Wilson]

Good evening,

We are seeing this same issue when running tests using Jest and vue-test-utils after upgrading to Vue 3. We are using the latest Vue (3.2.41) and ej2-vue-* packages (20.3.50).

Please let me know what additional details may be helpful.

When running npx jest:

TypeError: Right-hand side of 'instanceof' is not callable

176 | import { CheckBoxComponent } from '@syncfusion/ej2-vue-buttons';

          | ^

at o (node_modules/@syncfusion/ej2-vue-base/dist/ej2-vue-base.umd.min.js:10:1565)

      at node_modules/@syncfusion/ej2-vue-base/dist/ej2-vue-base.umd.min.js:10:6347

      at i (node_modules/@syncfusion/ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js:10:1061)

      at node_modules/@syncfusion/ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js:10:2655

      at node_modules/@syncfusion/ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js:10:2696

      at node_modules/@syncfusion/ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js:10:69

      at Object.<anonymous> (node_modules/@syncfusion/ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js:10:393)

      at Object.<anonymous> (src/components/ProductDialog.vue:176:1)

According to the debugger, it seems to be related to this line in speeddial.component.js, line 144:

Vue.component(SpeedDialItemsPlugin.name, SpeedDialItemsDirective);

It seems that this file is from a path containing "vue2", which seems like a problem when we are using the component with Vue 3.

Any assistance would be appreciated.

[Jamuna Sundaram]

Hi Tom,

This issue occurs because currently, we have not provided the umd files for Vue 3 components and we considered this as a feature at our end, we have planned to fix this in volume 4 release which is scheduled to roll out in mid of December 2022. You can track the status of this in the below feedback link.

https://www.syncfusion.com/feedback/34897/need-to-provide-a-direct-script-support-and-webpack-support-for-vue-3

[Theveshwar Jayakumar]

Hi Tom,

We are glad to announce that our Essential Studio 2022 Volume 4 release v20.4.0.38 is rolled out and is available for download under the following link.

https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download

In this release, we have added direct script support for Syncfusion Vue 3 components. You can use the following Vue 3 CDN link in your application.

https://cdn.syncfusion.com/ej2/20.4.38/ej2-vue-es5/dist/ej2-vue3.min.js

We have also prepared a sample for your reference. You can find the release notes in the below link

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

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue_3_cc541911-93018930.zip

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Theveshwar

[Warren]

The npm version still has this issue even up to version: 

@syncfusion/ej2-vue-grids@20.4.43

[Anbumani Rajendracholan]

Hi Warren,

Greetings from Syncfusion support.

We created a vue3 application with your shared packages, but we could not replicate your reported issue at our end. Please refer the below sample for further references. Kindly share us your issue reproducible sample to validate further on our end.

sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue_typeerror1757233004

Regards,

Anbumani Rajendracholan