Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6

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?

File milsymbol.js

import { ms } from "./ms.js";  import Symbol from "./ms/symbol.js"; ms.Symbol = Symbol;  export { ms }; 
like image 402
Jerry Chen Avatar asked Oct 03 '19 03:10

Jerry Chen


People also ask

How do you fix SyntaxError Cannot use import statement outside a module?

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.

What is require () in JavaScript?

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.

How do I use require instead of import?

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 .

What are Exports & Imports in JavaScript?

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.


1 Answers

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> 
like image 152
Emmanuel Avatar answered Oct 10 '22 22:10

Emmanuel