sample not working properly in vue3

[kumaresan-subramani]

Version

4.5.0

Reproduction link

https://github.com/kumaresan-subramani/vue3-suport

working sample

sample sample with "vue": "^2.6.11 works fine without any error

https://github.com/Saranya13/vue-sample/

Environment info

"vue": "^3.0.5"
"@vue/cli-plugin-babel": "^4.5.10",
    "@vue/cli-plugin-eslint": "^4.5.10",
    "@vue/cli-service": "^4.5.10",
    "@vue/compiler-sfc": "^3.0.5",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-vue": "^7.4.1",

Steps to reproduce

clone above mentioned smple
then npm i
finally npm run serve

browser throws script error, but the same working fine in vue2

What is expected?

component gets rendered without script error

What is actually happening?

throws script error

component-base.js?5981:6 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (component-base.js?5981:6)
    at __extends (component-base.js?5981:9)
    at eval (component-base.js?5981:20)
    at eval (component-base.js?5981:195)
    at Module../node_modules/@syncfusion/ej2-vue-base/src/component-base.js (chunk-vendors.js:575)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (index.js?4867:1)
    at Module../node_modules/@syncfusion/ej2-vue-base/src/index.js (chunk-vendors.js:599)

[kumaresan-subramani]

@sodatea , any suggestion on this?

Here we re extending Vue as like below

https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/base/src/component-base.ts#L7

After webpack done its job, it generates like below:

Here Vue gets undefined, so extend not work s expected in latest vue 3, refer below:

Then found below Docs and understnd need to chnage Vue to defineCOmpoentn in latest vue

https://v3.vuejs.org/guide/typescript-support.html#typing-computed

then changed and facing new issue and extending

step2

cant use extend in latest

[haoqunjiang]

Yeah, Vue 3 doesn't work this way. It's no longer newable. Maybe you should check out the Vue base class from vue-class-component. vuejs/vue-class-component#406 (comment)

[haoqunjiang]

I'm not sure. class Base extends Vue and then class Button extends Base wasn't actually a common pattern, so I have little experience with such usage.

Maybe changing the import Vue from 'vue' to import { Vue } from 'vue-class-component' in all the files can do the trick?

[kumaresan-subramani]

@sodatea , yes i tried but still facing same issue Vue module reference gets undefined.

So i used definecomponent - it works but cant extend opions to root class

#6217 (comment)

Is there any migration tool available?

[haoqunjiang]

Is there any migration tool available?

The tool is not yet ready. Even if it's ready, I'm afraid it won't be helpful in this use case.

yes i tried but still facing same issue Vue module reference gets undefined.

Make sure you are using vue-class-component v8.0.0-rc.1, not v7.

I found a test case in its repo, it should work: https://github.com/vuejs/vue-class-component/blob/53c0535c81fea0a7f6d1d279318e671033b790d1/test/specs/test.spec.ts#L143-L167

[haoqunjiang]

It's because in Vue 3 there's no extend method.
I guess your decorator implementation is influenced by https://github.com/vuejs/vue-class-component/blob/master/src/component.ts#L24-L91? It's refactored out in the next branch for Vue 3. I'm no expert on vue-class-component, so maybe you need to ask someone else for further guidance.

[kumaresan-subramani]

@sodatea , Thanks for your details.

yes, our decorator implementation based on this only. Then what will be the alternate way for extend.

https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/base/src/component-decorator.ts#L29-L126

Can you suggest someone who know this details

[haoqunjiang]

The Vue 3 support of vue-class-component is done by @ktsn.

[kumaresan-subramani]

@ktsn , Can you please suggest on this

[haoqunjiang]

I'm afraid not. Because it's not a bug in Vue CLI.

[ktsn]

Use extends option.
https://v3.vuejs.org/api/options-composition.html#extends

[kumaresan-subramani]

@ktsn , thanks for your reply.

Will check and update you.

[Tonysmark]

 // some.tsx file
import { Vue } from "vue-class-component";
import { VNode } from "vue";
export default class World extends Vue {
  render(): VNode {
    return <p>This is rendered via TSX</p>;
  }
}

and I got this error

vue @3.0.0
vue-class-component@8.0.0-0