title: "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6
body: <p>I'm using ArcGIS JSAPI 4.12 and wish to use <a href="https://github.com/spatialillusions/milsymbol" rel="noreferrer">Spatial Illusions</a> to draw military symbols on a map.</p>
  
  <p>When I add <code>milsymbol.js</code> to the script, the console returns error</p>
  
  <blockquote>
    <p>Uncaught SyntaxError: Cannot use import statement outside a module`</p>
  </blockquote>
  
  <p>so I add <code>type="module"</code> to the script, and then it returns</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: ms is not defined</p>
  </blockquote>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css"&gt;
  &lt;script src="https://js.arcgis.com/4.12/"&gt;&lt;/script&gt;
  &lt;script type="module" src="milsymbol-2.0.0/src/milsymbol.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      require([
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/MapImageLayer",
          "esri/layers/FeatureLayer"
      ], function (Map, MapView, MapImageLayer, FeatureLayer) {
  
          var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 }).asCanvas(3);
          var map = new Map({
              basemap: "topo-vector"
          });
  
          var view = new MapView({
              container: "viewDiv",
              map: map,
              center: [121, 23],
              zoom: 7
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>So, whether I add <code>type="module"</code> or not, there are always errors. However, in the official document of Spatial Illusions, there isn't any <code>type="module"</code> in the script. I'm now really confused. How do they manage to get it work without adding the type?</p>
  
  <h3>File <em>milsymbol.js</em></h3>
  
  <pre><code>import { ms } from "./ms.js";
  
  import Symbol from "./ms/symbol.js";
  ms.Symbol = Symbol;
  
  export { ms };
  </code></pre>