vue-class-component: Super expression must either be null or a function, not undefined

Question

Ok, it's a weird usecase, but in any case.

I have a controls component, that includes menu component, that also includes a controls component but without menu (strange stuff, but that's design).

What I do.

Controls component:

import {Component, Prop, Vue} from 'vue-property-decorator'
import Burger from "./Burger";
import ShadowLogo from "./ShadowLogo";
import MegaMenu from "./MegaMenu";

@Component
export default class Controls extends Vue {
  @Prop({default: false})
  showMenu: boolean;

  renderLogo(h) {
    return <div class="logo"><ShadowLogo/></div>
  }

  renderBurger(h) {
    return <Burger opened={this.showMenu} label="меню" on-want-change={e => this.$emit('show-menu', !this.showMenu)}></Burger>
  }

  renderFooter(h) {
    return <div class="copyrights"></div>
  }

  renderMenu(h) {
    return <div class="menu-layer">
      {this.showMenu ? <transition name="fade" appear={true}><MegaMenu/></transition> : null}
    </div>
  }

  render(h) {
    return <div class={["control-overlay", this.showMenu ? 'menu-opened' : null]}>
      {this.renderMenu(h)}
      {this.renderLogo(h)}
      {this.renderBurger(h)}
      {this.renderFooter(h)}
    </div>
  }
}

Menu inner controls component to be inserted inside the menu — the same, but without menu component (to prevent recursion, obviously)

import Controls from "./Controls";
import {Component} from 'vue-property-decorator'

@Component
export default class MenuInnerControls extends Controls {
  renderMenu(h) {
    return null;
  }
}

But in this setup I get en error:

51:13 Uncaught TypeError: Super expression must either be null or a function, not undefined
    at _inherits (51:13)
    at eval (51:19)
    at eval (MenuInnerControls.js?9737:8)
    at Object.<anonymous> (app.js:394)
    at __webpack_require__ (app.js:20)
    at eval (22:4)
    at Object.<anonymous> (app.js:219)
    at __webpack_require__ (app.js:20)
    at eval (18:8)
    at Object.<anonymous> (app.js:192)

(MenuInnerControls.js?9737:8 — is the renderMenu method in inherited class)

Atul

I'm not familiar with Vue decorators, but could it be that you must implement the constructor and call super? – Bouse

@MaartenBicknese nope – Atul

Answer 1

Ok, figured out that problem was in circular dependencies in imports. Controls renders MegaMenu that renders MenuInnerControls that extend Controls. And even so MenuInnerControls does not refer to MegaMenu, this causes circular dependency in imports. Should not be an issue in other languages, but js... oh

Atul