How to overcome the "Cannot access before initialization" error?

Question

JavaScript

Good afternoon. I use webpack+babel+vue.
I have 2 files app.js and methods.js
app.js contains Vue object and constant with object.

import {VUE_METHODS} from 'methods';

export const NDS = {
    title: 'НДС 20%'
};

VUE_METHODS.methods.objectFreeze(NDS);

export let app = new Vue({
    el      : '#app',
    mixins  : [VUE_METHODS],
    //бла бла бла дальше не важно
});

methods.js contains mixin

import axios from 'axios';
import {NDS} from 'app';

export const VUE_METHODS = {
    data    : function () {
        return {
            nds: NDS
        }
    },
    computed: {
       //бла бла бла
    },
    methods : {
        objectFreeze         : function (_o, _property = null) {
            //не важно
        }
    }
};

In the assembly file I call them like this

import 'methods';
import 'app';

Everything compiles, but in the browser, when using the compiled file, an error occurs in the console

Uncaught ReferenceError: Cannot access 'ne' before initialization

where ne is VUE_METHODS. And swears on the line with
VUE_METHODS.methods.objectFreeze(NDS);

How to solve the error?

Answer 1

You have a classic example of a cyclic dependency, move NDS into a separate module, otherwise you get the app -> methods -> app loading chain