title: ES6 Modules and Circular Dependency
body: <p>I'm having this problem in ES6 in a Babel Environment:</p>
  
  <pre><code>// A.js
  class A {
  }
  export default new A();
  
  // B.js
  import C from './C';
  class B {
  }
  export default new B();
  
  // C.js
  import A from './A';
  import B from './B';
  class C {
      constructor(A, B){
          this.A = A;
          this.B = B; // undefined
      }
  }
  export default new C(A, B)
  </code></pre>
  
  <p>I import them like this:</p>
  
  <pre><code>// stores/index.js
  import A from './A';
  import B from './B';
  import C from './C';
  
  export {
      A,
      B,
      C
  }
  </code></pre>
  
  <p>And from my app entry point I do:</p>
  
  <pre><code>import * as stores from './stores'; 
  </code></pre>
  
  <p>I would (hoped) expected the order of execution to be A -> B ->C but in reality it is A-> C-> B.<br>
  This is due to module B importing C, so that the C module is evaluated before the B module. This creates a problem in the setup of C because in that case <strong>B</strong> would be <strong>undefined</strong>.</p>
  
  <p>I've seen a similar <a href="https://stackoverflow.com/questions/38841469/how-to-fix-this-es6-module-circular-dependency">question</a> but I'm not sure the init function is the best solution here, it seems a bit hacky.</p>
  
  <p><strong>Q</strong>: What's the best practise about solving this kind of circular dependencies in ES6 that would possibly work in different environments (Babel, Rollup)?</p>