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

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

What I do.

Controls ponent:

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 ponent to be inserted inside the menu — the same, but without menu ponent (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)

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

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

What I do.

Controls ponent:

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 ponent to be inserted inside the menu — the same, but without menu ponent (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)

• javascript
• vue.js
• vue-class-ponents

• I'm not familiar with Vue decorators, but could it be that you must implement the constructor and call super? – Maarten Bicknese Commented Apr 16, 2018 at 9:39
• 1 @MaartenBicknese nope – Terion Commented Apr 16, 2018 at 9:40

1 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