title: Webpack uses ESM part of library although it requires CommonJS?
body: <p>I'm currently having a weird issue:
  <code>Uncaught (in promise) ReferenceError: Cannot access 'Agile' before initialization</code>,
  which is probably caused by <code>webpack</code> trying to correctly transform the <code>ESM</code> part of my library into <code>CommonJs</code>. Unfortunately, it doesn't do a good job and I end up with the  error mentioned above.</p>
  <p>My library supports both: <code>CommonJs</code> and <code>ESM</code>. <em>So I'm wondering why <code>webpack</code> uses the <code>ESM</code> part and transforms it into <code>CommonJs</code>, instead of directly using the <code>CommonJs</code> part of my library?!</em></p>
  <p><strong>Why am I so sure that it has something to do with the <code>ESM</code> to <code>CommonJs</code> transformation?</strong></p>
  <p>Well, I once forced <code>webpack</code> to use the <code>CommonJs</code> part of my library by removing the <code>ESM</code> support. By doing so, I simply deleted the path to the <code>ESM</code> module in the <code>package.json</code> of my library.</p>
  <pre class="lang-json prettyprint-override"><code>&quot;module&quot;: &quot;dist/esm/index.js&quot;
  </code></pre>
  <p>After unsupporting <code>ESM</code>, webpack was forced to use the <code>CommonJs</code> part
  and it works as expected, since webpack doesn't have to transform anything anymore. (see image)</p>
  <p><code>ESM</code> transformed to <code>CommonJS</code> [not working]
  <a href="https://i.stack.imgur.com/lFzQn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lFzQn.png" alt="enter image description here" /></a></p>
  <p>Untransformed <code>CommonJS</code> [working]
  <a href="https://i.stack.imgur.com/uluIA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uluIA.png" alt="enter image description here" /></a></p>
  <p>Since my library should support both: <code>ESM</code> and <code>CommonJS</code>,
  simply unsupporting <code>ESM</code> is no solution.</p>
  <p>Here is the <code>package.json</code> of my library:</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;name&quot;: &quot;@agile-ts/core&quot;,
    &quot;version&quot;: &quot;0.2.0+17b078aa&quot;,
    &quot;author&quot;: &quot;BennoDev&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;homepage&quot;: &quot;https://agile-ts.org/&quot;,
    &quot;description&quot;: &quot;Spacy, Simple, Scalable State Management Framework&quot;,
    &quot;keywords&quot;: [
      // ..
    ],
    &quot;main&quot;: &quot;dist/index.js&quot;,       // &lt;!-- CommonJs
    &quot;module&quot;: &quot;dist/esm/index.js&quot;, // &lt;!-- ESM
    &quot;types&quot;: &quot;dist/index.d.ts&quot;,
    &quot;scripts&quot;: {
     // ..
    },
    &quot;dependencies&quot;: {
      &quot;@agile-ts/utils&quot;: &quot;^0.0.8&quot;
    },
    &quot;peerDependencies&quot;: {
      &quot;@agile-ts/logger&quot;: &quot;^0.0.8&quot;
    },
    &quot;peerDependenciesMeta&quot;: {
      &quot;@agile-ts/logger&quot;: {
        &quot;optional&quot;: true
      }
    },
    &quot;publishConfig&quot;: {
      &quot;access&quot;: &quot;public&quot;
    },
    &quot;repository&quot;: {
      &quot;type&quot;: &quot;git&quot;,
      &quot;url&quot;: &quot;https://github.com/agile-ts/agile.git&quot;
    },
    &quot;bugs&quot;: {
      &quot;url&quot;: &quot;https://github.com/agile-ts/agile/issues&quot;
    },
    &quot;files&quot;: [
      &quot;dist&quot;,
      &quot;LICENSE&quot;,
      &quot;README.md&quot;,
      &quot;CHANGELOG.md&quot;
    ],
    &quot;sideEffects&quot;: false
  }
  </code></pre>
  <p>Maybe I've misconfigured something in the <code>package.json</code>
  and thus webpack uses <code>ESM</code> although it requires <code>CommonJs</code>?</p>
  <ul>
  <li>Node Version: <code>v16.3.0</code></li>
  <li>Github Repo: <a href="https://github.com/agile-ts/agile/tree/master/packages/core" rel="nofollow noreferrer">https://github.com/agile-ts/agile/tree/master/packages/core</a></li>
  </ul>