search

vuejs / vue-class-component

ES / TypeScript decorator for class-style Vue components.
MIT License
5.81k stars 431 forks source link

Vue 3 + Typescript + Vue Class component + Extending Vue = Uncaught TypeError: Class extends value #<Object> is not a constructor or null #602

Closed xEsk closed 2 years ago

xEsk commented 2 years ago

Version

3.2.31

Reproduction link

stackblitz.com

Steps to reproduce

Just run the repo in dev mode.

Steps which I used

  1. Create a new project, using Vite or Webpack (this is not important).
  2. Configure the project to use Typescript + Vue Class components
  3. Create a class name "View" for example, which extends "Vue" (from 'vue-class-component')
  4. Then the App class, instead of extending from Vue change it to View

What is expected?

A console message saying "Hell-o" and the default Vue welcome screen.

What is actually happening?

Throws an exception:

Uncaught TypeError: Class extends value #\<Object> is not a constructor or null

When you build the project, the dist version works like expected (with no errors) and displaying the console message, it only fails on dev mode.

I used this in previous projects, and now it is not working anymore...

xjrcode commented 2 years ago

If you are never going to instantiate the View.vue class then you can convert it to a normal View.ts class and then import it as usual:

image
xEsk commented 2 years ago

@xjrcode It works now, thank you.

kpturner commented 2 years ago

What if the vue component you are extending contains an HTML template and some CSS. How can that become a .ts file instead? I guess I will just have to refactor the code to split out the script.

nseb commented 1 year ago

Any body , has a solution ?

xEsk commented 1 year ago

In my situation my base component never have HTML or CSS so using the .ts extension instead of .vue do the trick.