title: What is the difference between mwc.js and mwc.esm.js?
body: <p>I created a StencilJS project that has a bunch of web components bundled in my <strong>mwc</strong> project.  From within Stencil, I can execute <code>npm run start</code> and see my components working as expected.  </p>
  
  <p>I created an Electron project and in it I'm importing the stencil mwc package using :</p>
  
  <pre><code>&lt;script src="dist/mwc/mwc.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>When I do this I've noticed the stencil generated code fails to run any for-loops that iterate over a <strong>Map</strong> or <strong>Set</strong>.  Basically the for-loop exits and never iterates.</p>
  
  <p>For example, in one of my components I have a class that defines a variable this way:</p>
  
  <pre><code>private _groupedItems : Map&lt;string, Item[]&gt; = new Map();
  </code></pre>
  
  <p>This variable gets populated and when the following code tries to run, it always fails:</p>
  
  <pre><code>@Method()
  async updateItemAsync( arg : { value : string, data : UpdateSelectItem } ) {
    //find where the item value is located
    let item : Item | undefined = undefined;
    for( const key of this._groupedItems.keys() ) {
      const groupedItems = this._groupedItems.get( key );
      if( groupedItems ) {
        item = groupedItems.find( item =&gt; item.value === arg.value );
        if( item ) {
          break;
        }
      }
    }
    if( item === undefined ) {
      console.error( 'Could not find item to update with value=', arg.value );
      return;
    }
    //NEVER GETS HERE!
    //more code below snipped out
  }
  </code></pre>
  
  <p>In Chrome devTools I can see that the generated JavaScript that is trying to run looks like this:</p>
  
  <pre><code>e.prototype.updateItemAsync = function(e) {
    return __awaiter(this, void 0, void 0, function() {
      var t, i, n, r, s;
      return __generator(this, function(a) {
        t = undefined;
        for (i = 0,
             n = this._groupedItems.keys(); i &lt; n.length; i++) {
          r = n[i];
          s = this._groupedItems.get(r);
          if (s) {
            t = s.find(function(t) {
            return t.value === e.value
          });
          if (t) {
            break
          }
        }
      }
      if (t === undefined) {
        console.error("Could not find item to update with value=", e.value);
        return [2]
      }
  </code></pre>
  
  <p>I discovered if instead of using the aforementioned script, I use this instead :  </p>
  
  <pre><code>&lt;script type="module" src="dist/mwc/mwc.esm.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Then everything works fine (<em>sort of</em>).  Basically when I fire up my Electron package using webpack all the code works as expected and my for-loops are now working.  The problem with this solution is that when I package my Electron application using electron-webpack, I can't run the resulting standalone EXE because I get an error message when the application starts up.  Chrome gives me an error when it tries to load the mwc.esm.js file:</p>
  
  <pre><code>Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
  </code></pre>
  
  <p>What is the difference between the mwc.js and mwc.esm.js files?  Why won't the mwc.js file run my for-loops properly?</p>