Vue "Cannot access '__WEBPACK_DEFAULT_EXPORT__'" when reference a components

Question

I have a Vue app with four components:

A,B,C,D

In a specific template I have this situation:

A nested in D nested in C nested in B nested in A

But when I execute the page I get this error:

Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
at Module.default (VM989 A.vue:3)
at eval (C.ts:37)
at Object../src/C.ts (bundle.js?v=Eyk_ReZs3kIu049BgV_w3FBVLlup9glNBHL1Wa04y2A:548)

If I change this part:

@Component({
    name: 'C',
    components: {
        'A': A
    }
})
export default class C extends Vue { }

in this (wrong) way:

@Component({
    name: 'C',
    components: {
    }
})
export default class C extends Vue { }

The page load but I get this (correct) error:

[Vue warn]: Unknown custom element: <dataform> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I don't know what is the problem...

Answer 1

I was in a circular dependency (https://v2.vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components) the solution was to remove the component declaration from the decorators and create a global reference:

Vue.component('A', A);