lusaxweb / vuesax

New Framework Components for Vue.js 2
https://lusaxweb.github.io/vuesax/
MIT License
5.64k stars 741 forks source link

[Vue3 Incompatibility] Uncaught TypeError: superClass is undefined #979

Open HipyCas opened 3 years ago

HipyCas commented 3 years ago

What happens

After adding Vuesax to Vue, when running the application in development mode it does not work as expected, not even loading, because of a Uncaught TypeError: superClass is undefined. This blocks the rest of the app from loading, and degrading to @latest does not work either. I have also tried to use the CDN, but then Vue doesn't pick up the components, but that is another story.

System information

Using npm@7.9.0 with a Node.js v15.12.0. The OS is Pop!_OS 20.10 (built on top of Ubuntu same version and the Linux 5.11 kernel). Currently using Firefox 88.0, but I have also tried with Chromium 90.0.4430.93 (snap) to get the same result. Using vuesax@next, so 4.0.1-alpha.25. You can view the full code at @HipyCas/wings-client.

Complete error message

Chromium:

vuesax.js?574d:174 Uncaught TypeError: Cannot read property 'prototype' of undefined
    at _inheritsLoose (vuesax.js?574d:174)
    at eval (vuesax.js?574d:18501)
    at Module.eval (vuesax.js?574d:18553)
    at __webpack_require__ (vuesax.js?574d:37)
    at eval (vuesax.js?574d:101)
    at eval (vuesax.js?574d:104)
    at webpackUniversalModuleDefinition (vuesax.js?574d:10)
    at eval (vuesax.js?574d:17)
    at Object../node_modules/vuesax/dist/vuesax.js (chunk-vendors.js:1407)
    at __webpack_require__ (app.js:854)

Firefox:

Uncaught TypeError: superClass is undefined
    _inheritsLoose vuesax.js:174
    _class3 vuesax.js:18501
    <anonymous> vuesax.js:18553
    __webpack_require__ vuesax.js:37
    <anonymous> vuesax.js:101
    <anonymous> vuesax.js:104
    webpackUniversalModuleDefinition vuesax.js:10
    <anonymous> vuesax.js:17
    js chunk-vendors.js:1407
    __webpack_require__ app.js:854
    fn app.js:151
    <anonymous> main.js:12
    js app.js:1301
    __webpack_require__ app.js:854
    fn app.js:151
    1 app.js:1374
    __webpack_require__ app.js:854
    checkDeferredModules app.js:46
    <anonymous> app.js:994
    <anonymous> app.js:997

My code

The code is the same as the provided in the documentation, just changing some things which were already working on my Vue application.

This is the code for the main.js file:

import { createApp } from 'vue';
import App from './App.vue';
import Vuesax from 'vuesax'; // Vuesax NPM package
import router from './router';
import store from './store';
import 'vuesax/dist/vuesax.css'; // Vuesax CSS

createApp(App).use(Vuesax).use(store).use(router).mount('#app'); 

NPM does not report any dependency or conflict problem, but here goes the (abbreviated) package.json:

{
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuesax": "^4.0.1-alpha.25",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-mocha": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "chai": "^4.1.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-tauri": "*"
  }
}
CuBeof commented 3 years ago

maybe you should try vue2

HipyCas commented 3 years ago

Thanks for your help, I will try. But, are you saying that Vuesax is not compatible with Vue3 yet?

HipyCas commented 3 years ago

I have changed back to Vue2 and it works flawlessly. Sadly, I would like to use the framework with Vue3, therefore I think the issue still has to be addressed.

Tofandel commented 3 years ago

Well there is way more issues than this for vue3 lol, this project is not and will probably never be compatible with vue 3 judging by the state of things Vue2 and Vue3 are very different and would require a major rewrite

HipyCas commented 3 years ago

Ok thanks! Is then the @lusaxweb/vuesax-next repository the one supposed to be compatible with Vue3?

Tofandel commented 3 years ago

Nope not even, it was just supposed to be a clean rewrite of the project which has way too many issues but it's currently abandoned and didn't make it past alpha (only 30% of components)

AntonMinski commented 3 years ago

There are many other alternatives for Vue2. But we need it for Vue3. This is time to say goodbye, Vuesucs.

KiprotichKelly commented 10 months ago

Do we have support on Vue 3 now?

codersuraz commented 10 months ago

What's the status of this project? Is it active or abandoned?