javascript - tutorial - “Uncaught SyntaxError: Cannot use import statement outside a module” When Importing ES6



esri javascript api 4.11 samples (1)

I'm using ArcGIS JSAPI 4.12 and wishing to use Spatial Illusions to draw military symbols on map.

When I add milsymbol.js to script, the console returns error Uncaught SyntaxError: Cannot use import statement outside a module , so I add type="module" to the script, the it returns Uncaught ReferenceError: ms is not defined .

Here's my code:

<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

<script>
        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
            });
        });
    </script>

So, whether I add type="module" or not, there's always errors. However, in the official document of Spatial Illusions, there's no type="module" in the script. I'm now really confused, how do they manage to get it work without adding the type?

milsymbol.js

import { ms } from "./ms.js";

import Symbol from "./ms/symbol.js";
ms.Symbol = Symbol;

export { ms };

It looks like the cause of the errors are:

1) You're currently loading the source file in the src directory instead of the built file in the dist directory (you can see what the intended distributed file is here ). This means that you're using the native source code in an unaltered/unbundled state, leading to the following error: Uncaught SyntaxError: Cannot use import statement outside a module . This should be fixed by using using the bundled version since the package is using rollup to create a bundle.

2) The reason you're getting the Uncaught ReferenceError: ms is not defined error is because modules are scoped, and since you're loading the library using native modules, ms is not in the global scope and is therefore not accessible in the following script tag.

It looks like you should be able to load the dist version of this file to have ms defined on the window . Check out this example from the library author to see an example of how this can be done.





arcgis-js-api