Home / Questions / 294643
Accepted
Jorius
Asked: 2020-09-19 13:08:38 +0800 CST 2020-09-19 13:08:38 +0800 CST

How to fix circular dependencies in JavaScript?

  • 772

I have a project in with a file structure more or less like this:

...
public/
src/
    ...
    core/
        ajax-interceptors.js
        constants.js
        global-ui.js
        index.js
        redux-store.js
        service-mocker.js
    ...
.eslintrc.json
.gitignore
package.json
...

The file index.jscontains the following:

// @scripts
----------------------------------------------------------
// Aquí aparece el primer error
import { addAjaxInterceptors } from './ajax-interceptors'; 
// Dependency cycle detected.eslint(import/no-cycle)
----------------------------------------------------------
import { initializeGlobalUI } from './global-ui';
import { initializeReduxStore } from './redux-store';
import { initializeServiceMocker } from './service-mocker';

const initializeApp = () => {
    const store = initializeReduxStore();
    const serviceMocker = initializeServiceMocker();
    const globalUI = initializeGlobalUI(store);

    addAjaxInterceptors();
    loadFonts();

    const core = {
        globalUI,
        serviceMocker,
        store
    };

    return core;
};

export const {
    globalUI,
    store
} = initializeApp();

The file ajax-interceptors.jscontains the following:

// @packages
import axios from 'axios';

// @scripts
// Aquí aparece el mismo error (Dependency cycle detected.eslint(import/no-cycle))
// Estoy llamando el objeto globalUI desde el index
// puesto que ya lo inicializé con el store de redux necesario para trabajar
import { globalUI } from '.';

const addResponseInterceptors = () => {
    axios.interceptors.response.use(
        (response) => {
            if (Object.prototype.hasOwnProperty.call(response.data, 'data')) {
                const {
                    data,
                    message,
                    messageType
                } = response.data;

                if (message && messageType) {
                    globalUI.showToastNotification({
                        msg: message,
                        type: messageType
                    });
                }

                return data;
            }

            return response.data;
        },
        (error) => Promise.reject(error)
    );
};

export const addAjaxInterceptors = () =>
    addResponseInterceptors();

How can I fix this circular dependencies error without affecting the architecture I have?

javascript

2 Answers

  1. Best Answer

    Normally when there are circular dependencies, it is an indication that the architecture is not well conceived (there are other reasons, but, as it happens in your case, this is usually the most common). What is happening to you is the following:

    Módulo 1 => importa a Módulo 2 => importa a Módulo 1

    Any solution you try to apply to solve this includes a refactoring of the code, and this means that you will have to vary your architecture a bit.

    One solution is to move the logic from module 2 to module 1 but I understand that this is not ideal because the modules have different functions. Another solution is that you create a third module, so instead of the previous dependency, it would be something like:

    Módulo 1 => importa a Módulo 3
Módulo 2 => importa a Módulo 3

    Following these recommendations you can find dissimilar solutions, but one that comes to mind among the many possible ones is the following:

    core.js file:

    import { initializeGlobalUI } from './global-ui';
import { initializeReduxStore } from './redux-store';
import { initializeServiceMocker } from './service-mocker';

const store = initializeReduxStore();
const serviceMocker = initializeServiceMocker();
const globalUI = initializeGlobalUI(store);

export const core = {
    globalUI,
    serviceMocker,
    store
};

    ajax-interceptors.js file:

    import axios from 'axios';
import { core } from './core';

const addResponseInterceptors = () => {
    axios.interceptors.response.use(
        (response) => {
            if (Object.prototype.hasOwnProperty.call(response.data, 'data')) {
                const {
                    data,
                    message,
                    messageType
                } = response.data;

                if (message && messageType) {
                    core.globalUI.showToastNotification({
                        msg: message,
                        type: messageType
                    });
                }

                return data;
            }

            return response.data;
        },
        (error) => Promise.reject(error)
    );
};

export const addAjaxInterceptors = () =>
    addResponseInterceptors();

    index.js file:

    import { core } from './core';
import { addAjaxInterceptors } from './ajax-interceptors';

const initializeApp = () => {

    addAjaxInterceptors();
    loadFonts();

    // Haz lo que necesites con core  
};
    • 5

  2. You could pass the request as a parameter:

    addAjaxInterceptors(globalUI);

    So you would not need to import it in ajax-interceptors.js.

    Another option could be to keep a static variable global-uithat holds the value of initializeGlobalUI(store);so you can import it with something like:

    import { getGlobalUI } from './global-ui';
    • 1