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

Hey there, let’s work through this error you’re facing with your nested Controls and MegaMenu components. This specific error almost always pops up when dealing with circular component references—since your Controls includes MegaMenu, and MegaMenu includes another Controls, Vue gets stuck trying to initialize these components before they’re fully defined. Here’s how to fix it:

1. Use Async Component Imports to Break the Circular Reference #

Instead of importing your components synchronously, switch to lazy/async imports. This tells Vue to load the component only when it’s actually needed, avoiding the initialization race condition.

Update your Controls component: #

import {Component, Prop, Vue} from 'vue-property-decorator'
import Burger from "./Burger";
import ShadowLogo from "./ShadowLogo";
// Replace synchronous import with async lazy load
const MegaMenu = () => import("./MegaMenu");

@Component({
  // Make sure to register all local components here
  components: {
    Burger,
    ShadowLogo,
    MegaMenu
  }
})
export default class Controls extends Vue {
  @Prop({default: false}) showMenu!: boolean;

  renderLogo() {
    // Your existing render logic here...
  }
}

Do the same in your MegaMenu component: #

If MegaMenu imports Controls (which it sounds like it does), update that import too:

import {Component, Vue} from 'vue-property-decorator'
// Async import for Controls as well
const Controls = () => import("./Controls");

@Component({
  components: {
    Controls
  }
})
export default class MegaMenu extends Vue {
  // Your MegaMenu logic here...
}

2. Double-Check Component Registration #

Notice that in the updated code, we added a components object to the @Component decorator. Your original code didn’t include this—Vue needs to know about local components you’re using in the template or render function, so this step is critical.

3. Verify Render Function Logic #

If you’re using MegaMenu directly in your render function (like in renderLogo), make sure you’re referencing the registered component correctly. For example, if you’re creating a VNode, use the component’s registered name (e.g., 'mega-menu' if you kebab-cased it) or the imported async component variable.

Why This Works #

Circular references cause Vue to try to initialize a component before its dependency is fully defined, leading to the "Super expression" error. Async imports defer the loading of the dependent component until it’s actually rendered, breaking the cycle and letting each component initialize properly.

内容的提问来源于stack exchange，提问作者Terion