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...

tony19 · Accepted Answer · 2022-07-15 01:26:47Z

6

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);

edited Jul 15, 2022 at 1:26

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 16, 2020 at 22:09

gidanmx2

4691 gold badge9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related