I'm using ArcGIS JSAPI 4.12 and wish to use Spatial Illusions to draw military symbols on a map.
When I add milsymbol.js
to the script, the console returns error
Uncaught SyntaxError: Cannot use import statement outside a module`
so I add type="module"
to the script, and then 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 are always errors. However, in the official document of Spatial Illusions, there isn't any type="module"
in the script. I'm now really confused. How do they manage to get it work without adding the type?
import { ms } from "./ms.js"; import Symbol from "./ms/symbol.js"; ms.Symbol = Symbol; export { ms };
The "SyntaxError: Cannot use import statement outside a module" occurs when we use the ES6 Modules syntax in a script that was not loaded as a module. To solve the error, set the type attribute to module when loading a script, or in your package. json for Node.
1) require() In NodeJS, require() is a built-in function to include external modules that exist in separate files. require() statement basically reads a JavaScript file, executes it, and then proceeds to return the export object.
The major difference between require and import , is that require will automatically scan node_modules to find modules, but import , which comes from ES6, won't. Most people use babel to compile import and export , which makes import act the same as require .
Import. You can import modules into a file in two ways, based on if they are named exports or default exports. Named exports are constructed using curly braces. Default exports are not.
I got this error because I forgot the type="module"
inside the script tag:
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With