title: JavaScript ES6 modules + traceur
body: <p>I'm using <a href="http://www.2ality.com/2014/09/es6-modules-final.html">ES6 modules</a> transpiled to ES5 with <a href="https://github.com/google/traceur-compiler">traceur</a>.<br>
  Transpilation is done via grunt + <a href="https://www.npmjs.org/package/grunt-traceur">grunt-traceur</a></p>
  
  <p>Traceur allows you to pick which module handler to use: its own, AMD, commonJS or inline.<br>
  I have tried most of them, but none seems to to work. Why?</p>
  
  <p><strong>TestClass.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export default class TestClass {
      constructor() {
          alert('test');
      }
  }
  </code></pre>
  
  <p><strong>Main.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import TestClass from './TestClass';
  
  var test = new TestClass();
  </code></pre>
  
  <p><strong>Gruntfile.js</strong> (extract)</p>
  
  <pre class="lang-js prettyprint-override"><code>traceur: {
      options: {
          experimental: true,
          blockBinding: true,
          modules: 'amd'
      }
  }
  </code></pre>
  
  <p><strong>index.html</strong> (extract)</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="js/vendor/traceur-runtime.js"&gt;&lt;/script&gt;
  &lt;script src="js/vendor/require.js"&gt;&lt;/script&gt;
  
  &lt;script defer async src="js/compiled/Main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>Error given</strong></p>
  
  <blockquote>
    <p>Uncaught Error: Mismatched anonymous define() module: function ($__0)
    {</p>
  </blockquote>
  
  <p>It seems that <a href="https://github.com/aaronfrost/grunt-traceur/issues/36">there are issues</a> with the grunt plugin, but even using an older version doesn't seem to help.  </p>
  
  <p>Code was adapted from <a href="http://guybedford.com/practical-workflows-for-es6-modules">an article</a>.</p>