[Javascript] Circular dependency

We often see circular dependency, why it's a problem, why we should avoid it and hwo to avoid it?

Let's see any example first

// main.js

import A from "moduleA"

// moduleA.js

import B from "./moduleB"
console.log("ModuleA", B)
export default 'A'

// moduleB.js

import A from "moduleA"
console.log('MoudleB', A)
export default 'B'

The output is:

ModuleB: undefined
ModuleA: 'B'

Why is so?

• From main module, we import A
• Then code run into A module
  • It tries to import module B, but module A have yet export
• Then code run into B module
  • because A has yet export, so log out ModuleB: undefined
  • then moulde B exports
• Code back to module A, log out ModuleA: B

Why it's important?

In Frontend, from one ComponentA, we might import Component B, based on some event, Compoennt B need to include Component A... in such case, we might run into issue.

How to resolve the issue?

Use Vue as an example

// ComponentA.vue

import ComponentB from "./ComponentB.vue";

export default {
  components: {
      ComponentB // this will be undefined
  }
}

// ComponentB.vue

import ComponentA from "./ComponentA.vue";

export default {
  components: {
      ComponentA 
  }
}

The ways to solve the issue:

Solution A: using life cycle hook

// ComponentA.vue

import ComponentB from "./ComponentB.vue";

export default {
  beforeCreate() {
    this.$options.components.ComponentB = require("./ComponentB.vue").default
  }
}

// ComponentB.vue

import ComponentA from "./ComponentA.vue";

export default {
  components: {
      ComponentA 
  }
}

Solution B: using lazy import:

// ComponentA.vue

import ComponentB from "./ComponentB.vue";

export default {
  components: {
      ComponentB: () => import('./ComponentB.vue').then(m => m.default)
  }
}

// ComponentB.vue

import ComponentA from "./ComponentA.vue";

export default {
  components: {
      ComponentA 
  }
}