title: How to avoid circular import (dependency) in JS?
body: <p>I have a simple example where I have a circular dependency issue. What can be done to avoid this importing loop?</p>
  <p>store.js</p>
  <pre><code>import { fetchApi } from &quot;./api&quot;;
  
  class Store {
    auth = &quot;zzzzz&quot;;
  
    fetch = () =&gt; fetchApi();
  }
  
  const store = new Store();
  export default store;
  </code></pre>
  <p>api.js</p>
  <pre><code>import client from &quot;./client&quot;;
  
  export const fetchApi = () =&gt; client(&quot;/test&quot;);
  </code></pre>
  <p>client.js</p>
  <pre><code>import store from &quot;./store&quot;;
  
  const client = (endpoint) =&gt; {
    const config = {
      method: &quot;GET&quot;,
      headers: {
        Authorization: `Bearer ${store.auth}`
      }
    };
  
    return window.fetch(endpoint, config);
  };
  
  export default client;
  </code></pre>
  <p>With this code, I have the following situation:</p>
  <ul>
  <li>store is importing api</li>
  <li>api is importing client</li>
  <li>client is importing store</li>
  </ul>
  <p>store -&gt; api -&gt; client -&gt; store</p>
  <p>Happy to hear suggestions or see examples on how can I avoid this pattern. </p>