Issue with Dependency cycle via in Vue.js

I’m having an issue with a linting error in a vue.js project. The error that I get looks like this:

/Users/mikecuddy/Desktop/coding/data_science_projects/statues/client/src/store/modules/common.js
   4:1  error    Dependency cycle via @/store/index:4  import/no-cycle

I have no idea how to get rid of this error. I tried renaming files, using this.$router and this.$store with no luck. Here is some of my code:

router -> index.js: The data path is the main one I want to get to. Notice that I have the store import files commented out – that does get rid of the dependency error but then I have issues with doing something like:

this.$store.state.common.loginFlag

as opposed as importing the store and doing this:

store.state.common.loginFlag

import Vue from 'vue';
import VueRouter from 'vue-router';
// import store from '../store/index.js';
// import store from '@/store/index';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/data',
    name: 'Data',
    component: () => import('../views/Data.vue'),
    beforeEnter: (to, from, next) => {
      if (this.$store.state.common.loginFlag === false) {
        next('/login');
      } else {
        next();
      }
    },
    beforeRouteLeave: (to, from, next) => {
      if (this.$store.state.common.loginFlag === false) {
        next('/login');
      } else {
        next();
      }
    },
  },
];

const router = new VueRouter({
  routes,
});

export default router;

store/modules/common.js:

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
import router from '../../router';

Vue.use(Vuex);

const data = {
  userNotFound: false,
  passwordNoMatch: false,
  loginFlag: false,
};

const getters = {
  userNotFound: (state) => state.userNotFound,
  passwordNoMatch: (state) => state.passwordNoMatch,
  loginFlag: (state) => state.loginFlag,
};

const actions = {

  login: ({ commit }, { payload }) => {
    const path = 'http://localhost:5000/login';
    axios.post(path, payload)
      .then((res) => {
        if (res.data.login_flag) {
          commit('session/setUserObject', res.data.user, { root: true });
          commit('setLoginFlag', res.data.login_flag);
          // Tried this:
          router.push{ name: 'Data' }
          // As well as trying this: 
          this.$router.push({ name: 'Data' });
        }
        commit('setNoPasswordMatch', res.data.Password_no_match);
        commit('setUserNotFound', res.data.Not_found);
      })
      .catch((error) => {
        console.log(error);
      });
  },

};

// I have mutations but did not think they'd be needed 
const mutations = {};

export default {
  namespaced: true,
  state: data,
  getters,
  actions,
  mutations,
};

In the common.js file I’ve tried commenting out:

import router from '../../router';

and that seemed to work – got the Dependency cycle error to go away and in the router/index.js file I was able to get to the route but had an issue with this.$store.state.common.loginFlag when I commented out import store from ‘@/store/index’; If I leave in the import of: import store from ‘@/store/index’; then I get the dependency cycle error.

I’ve also found some help at these other stack pages:

TypeError: Cannot read properties of undefined (reading ‘$router’) vuejs

dependency cycle detected import/no-cycle

I will say that I hate using linters and that’s what’s giving me the problem here.

Here is the code for store/index.js:

import Vue from 'vue';
import Vuex from 'vuex';
import common from './modules/common';
import session from './modules/session';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    common,
    session,
  },
});

Answer

Looks like the reason for the dependency cycle here is when you are importing router setup in the store module, and the router in turn imports the whole store. It’s okay to use store in router, but try to move routing/redirect logic (these lines):

// Tried this:
router.push{ name: 'Data' }
// As well as trying this: 
this.$router.push({ name: 'Data' });

from /modules/common.js to the component or global router hook level, so you avoid router import in the store module.

Advertisement

Answer