`template or render function not defined` when mounting a component using vue-class-component

[dennybiasiolli]

Version

2.7.4

Reproduction link

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

Steps to reproduce

• clone the repo https://github.com/dennybiasiolli/vue27-syncfusion-bug
• install dependencies with npm install
• launch with npm run serve
• notice the error in the console

What is expected?

The page should display a button with "Button" text at the bottom of the page.

What is actually happening?

The component is not displaying and in the console there is an error:

Failed to mount component: template or render function not defined.

[JuniorTour]

Maybe the external component you are using is NOT compatible with Vue@2.7? import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';

Its package.json only list Vue@2.6.14

[dennybiasiolli]

Oh maybe you are right, but I did think the update from 2.6 to 2.7 was without breaking changes.
Just opened this issue in case it can be useful to analyze the problem

[yyx990803]

Fundamental problem is that ej2-vue is applying different behavior based on the presence of the global h API: https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/base/src/component-base.ts#L28

This is wrong because the presence of global h is never guaranteed to be the difference between Vue 2 and Vue 3. It should use Vue.version to check behavior difference instead.

[dennybiasiolli]

@yyx990803 thank you very much for the explanation! I will try to submit a fix with a PR on the ej2-vue-ui-components repository.