vue-class-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>
  }
}

Компонент внутреннего управления меню для вставки в меню - то же самое, но без компонента меню (очевидно, для предотвращения рекурсии)

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

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

Но в этой настройке я получаю ошибку:

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 - это метод renderMenu в унаследованном классе)

1 ответ

Решение

Хорошо, выяснили, что проблема заключается в циклических зависимостях в импорте. Controls оказывает MegaMenu что делает MenuInnerControls которые простираются Controls, И даже так MenuInnerControls не относится к MegaMenuэто вызывает круговую зависимость в импорте. Не должно быть проблемой на других языках, но JS... о

Другие вопросы по тегам