title: In JavaScript, how can I statically import subclasses in the superclass without hitting ReferenceError?
body: <p>I have a base class that is kind of like a &quot;router&quot; to a known set of nodes, where any node can &quot;go to&quot; any other node.  Each node is subclassed from a &quot;base&quot; node with shared methods.</p>
  <p>I am having trouble figuring out how to set this up without using Dynamic Imports in JavaScript.</p>
  <p>Here's my code (&quot;a&quot; and &quot;b&quot; are the nodes):</p>
  <p><strong>a.js</strong></p>
  <pre><code>import Base from &quot;./base.js&quot;;
  
  export default class A extends Base {
      constructor() {
          super();
      }
  
      doAStuff() {
          console.log(&quot;doing A stuff&quot;);
      }
  }
  </code></pre>
  <p><strong>b.js</strong></p>
  <pre><code>import Base from &quot;./base.js&quot;;
  
  export default class B extends Base {
      constructor() {
          super();
      }
  
      doBStuff() {
          console.log(&quot;doing B stuff&quot;);
      }
  }
  </code></pre>
  <p><strong>base.js</strong> (the common base class)</p>
  <pre><code>import A from &quot;./a.js&quot;;
  import B from &quot;./b.js&quot;;
  
  export default class Base {
      constructor() {
      }
  
      async goToA() {
          console.log(&quot;going to A&quot;);
          return new A();
      }
  
      async goToB() {
          console.log(&quot;going to B&quot;);
          return new B();
      }
  }
  </code></pre>
  <p>and finally, <strong>index.js</strong>, the node script to run it all -- this starts with &quot;A&quot; and navigates to &quot;B&quot; and then back to &quot;A&quot;.</p>
  <pre><code>import A from &quot;./a.js&quot;;
  
  (async () =&gt; {
      var a = new A();
      var b = await a.goToB();
      b = await b.goToA();
  })();
  </code></pre>
  <p>When I run this in Node.JS using <code>node index.js</code>, I get the following error:</p>
  <pre><code>export default class B extends Base {
                                 ^
  ReferenceError: Cannot access 'Base' before initialization
      at file:///Users/asefkow/git3/webclient/SitesCloud/dev/components/testing/b.js:5:32
      at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
      at async Loader.import (internal/modules/esm/loader.js:166:24)
      at async Object.loadESM (internal/process/esm_loader.js:68:5)
  </code></pre>
  <p>However, if I remove the <code>import</code> statements, and instead dynamically import &quot;a&quot; and &quot;b&quot; in <code>base.js</code> using code like below, then <code>node index.js</code> works.</p>
  <pre><code>/* jshint esversion: 8, node: true */
  
  export default class Base {
      constructor() {
      }
  
      async goToA() {
          let {default: A} = await import('./a.js');
  
          console.log(&quot;going to A&quot;);
          return new A();
      }
  
      async goToB() {
          let {default: B} = await import('./b.js');
  
          console.log(&quot;going to B&quot;);
          return new B();
      }
  }
  </code></pre>
  <p>Is there any way to avoid the dynamic imports here?</p>